PHP и AJAX влюбляются друг в друга

Каталог обучения:

Фонд AJAX
PHP и AJAX
Формат JSON
AJAX в jQuery

Адрес оригинальной ссылки на личный сайт: приветственные сообщения……………………………………………….

1.Фонд AJAX

(1) AJAX (асинхронный JavaScript и XML): Сокращения для асинхронного JavaScript и xml.

(2) AJAX-это не язык программирования, а технология, которая может обновлять некоторые страницы без загрузки всей страницы.

(3) Недостатки традиционных веб-страниц: необходимость обновления содержимого или отправки формы, необходимость перезагрузки всей страницы; используйте преимущества AJAX: благодаря небольшому объему обмена данными с сервером в фоновом режиме веб-страницы могут получать асинхронные частичные обновления. Для заполнения сложных форм существует очень хороший пользовательский интерфейс.

((4) Синхронизация и синхронизация AJAX: Синхронизация означает загрузку всей страницы; Синхронизация может загружать некоторые страницы. В частности, соединение между клиентом и сервером. До появления технологии Ajax все данные обменивались синхронно, поэтому заполнять более сложные формы было бы очень хлопотно. С помощью объекта XMLHttpRequest синхронный мир становится асинхронным миром. Фон объекта может обмениваться данными с сервером через XMLHttpRequest.

(5) Создание объекта XMLHttpRequest: var XMLHttpRequest(); Просто создайте экземпляр объекта напрямую! Примечание. IE5 и IE6 не поддерживают это определение, если вы хотите обеспечить совместимость страниц браузера, как показано в следующем коде:

var request;
if(window.XMLHttpRequest){
    request  = new XMLHttpRequest();  // IE7+,Firefox,Chrome,Opera,Safari...
}else{
    request = new ActiveObject("Microsoft.XMLHTTP"); // IE6,IE5
}

(6) HTTP-запросы: HTTP-это протокол без состояния: проще говоря, протокол, который не может установить постоянное соединение и не имеет памяти. Далее: в процессе запроса и ответа на страницу осуществляется отладка веб-страниц.

(6.1) Полный процесс запроса HTTP обычно состоит из следующих семи шагов:

Установление TCP-соединения
Веб-браузер Отправляет команду запроса на веб-сервер
Веб-Браузер Отправляет Информацию Заголовка Запроса
Ответ веб-сервера
Веб-сервер отправляет информацию заголовка ответа
Веб – серверы отправляют данные в браузеры
Веб-сервер закрывает TCP-соединение

(6.2) HTTP-запросы обычно состоят из четырех частей:

Методы или действия HTTP-запросов, такие как запросы GET или POST
Запрашиваемый URL-адрес всегда знает, какой запрошенный адрес.
Заголовок запроса, включая некоторую информацию об окружающей среде клиента, информацию об аутентификации и т.д.
Тело запроса, то есть тело запроса, которое может включать в себя запрос, платежную и другую информацию, представленную клиентами, информацию о форме и так далее.

(6.3) ПОЛУЧИТЬ и ОПУБЛИКОВАТЬ [Получить значение имени из формы]

Проще говоря, он собирает значения из формы. Прошлые значения, одно в виде URL (небезопасно), одно в виде значения (безопасно); GET обычно используется для сбора информации, используйте Параметры передачи URL , ограниченные 2000 символами, видимыми для всех, небезопасно. POST обычно используется для Отправки данных из формы Параметры в теле HTTP-запроса не ограничивают количество отправляемых сообщений.

(6.4) Http-ответ обычно состоит из трех частей:

Код состояния, состоящий из числа и текста, используется для отображения того, выполняется запрос успешно или нет.
Заголовок ответа, включая тип сервера, дату и время, тип и длину содержимого и т.д.
Тело отклика, то есть тело отклика.

(6.5) Код состояния Http состоит из трех цифр, в которых первая цифра определяет тип кода состояния:

1XX: Информационный класс, указывающий на получение запросов веб-браузера, находится в процессе дальнейшей обработки;
2XX: Успешно, что указывает на то, что запросы пользователей правильно получены, поняты и обработаны, например, 200 ОК
3XX: Перенаправление, указывающее, что запрос был неудачным и что клиент должен предпринять дальнейшие действия
4XX: Ошибка клиента указывает на то, что запрос, отправленный клиентом, неверен, например, 404 НЕ НАЙДЕН, что означает, что документ, на который ссылается запрос, не существует.
5XX: Ошибка сервера, указывающая на то, что сервер не может завершить обработку запросов.

(7) XMLHttpRequest отправляет запросы: (Метод объекта)

Открыть (метод запроса метода, адрес запроса URL, синхронизация асинхронного запроса или асинхронизация (асинхронизация истинна, синхронизация ложна, на самом деле значение по умолчанию истинно);///| вызов Асинхронный запрос Отправить (строка); (параметр не может быть заполнен или равен нулю при использовании метода get, так как информация включена в URL адресной строки; сообщение должно быть заполнено);//запрос
Отправить На сервер

Возьми каштан:

request.open("POST","create.php",true);
Request.setRequest Header ("Content-type", "application/x-www-form-urlencoded"); //Set HTTP header information to tell the web server to send a form; Note: setRequest requests must be placed between open and send, otherwise an exception will be thrown.
Request. send ("name = Wang Dahammer & sex = man");

(8) XMLHttpRequest получает ответ: (Методы и атрибуты объекта)

responseText Проще говоря: Получите данные, на которые сервер отвечает и отправляет обратно. Получите соответствующие данные в строковой форме.
Ответ XML: Получите соответствующие данные в виде XML. Данные теперь обычно преобразуются в форму JSON.
Статус и statusText: Возвращает коды состояния HTTP в числовой и текстовой форме.
Getallresponseheaders (): Получает все заголовки ответов.
GetResponseHeader (): Запрос значения поля в ответе.

Свойство readyState: Ответ уведомляется, когда он возвращается успешно.

0: Запрос не инициализирован, и open еще не был вызван.
1: Соединение с сервером установлено, и был вызван вызов open.
2: Запрос получен, то есть полученная информация.
3: При обработке запроса, то есть, получатель ответа получен.
4: Запрос выполнен, и ответ готов, то есть ответ завершен.

Подними каштан. Охватывает большую часть содержимого Ajax (типичный процесс XHR для создания ajax )

Var request = new XMLHttpRequest ();//Create XHR objects
Request.open ("GET", "get.php", "true);// Call an asynchronous request
Request. send ();// Send an asynchronous request
// Monitor events to determine whether the server is responding correctly
request.onreadystatechange = function(){
  if(request.readyState===4 && request.status === 200){
    Request. reponseText; // Receive the data sent back by the server
   }
}

2.PHP и АЯКС

Практика: [Сервер и клиент] Внедрить фоновый интерфейс для запроса сотрудников и новых сотрудников

(1) Код клиента:

// New Employee Client Code
document.getElementById("save").onclick=function(){
    Var request = new XMLHttpRequest ();//Create XHR objects
    Request.open ("POST", "action.php"); // Call asynchronous request
    // The URL of data splicing
    // document. getElementById ("staffName"). value gets the value written by the user in the form
    var data = "username=" + document.getElementById("staffName").value 
                  + "&num=" + document.getElementById("staffNumber").value 
                  + "&workname=" + document.getElementById("staffJob").value;
    Request.setRequestHeader ("Content-type", "application/x-www-form-urlencoded"); and //Set HTTP header information
    Request. send (data);//send asynchronous requests
    // Monitor events to determine whether the server can respond correctly
    request.onreadystatechange=function(){
        if(request.readyState===4){
            if(request.status===200){
                // Inner HTML not only reads element content, but also writes content to elements.
                // The Ajax engine object receives the data sent back by the server through the responseText attribute or the responseXML attribute, and then processes it in the static page to achieve the effect of partial refresh of the page.
                document.getElementById("createResult").innerHTML=request.responseText;
            }else{
                Alter ("Error:"+request. status);
            }
        }
    }
}

(2) Код на стороне сервера:

// Query employee server-side code
mysqli_connect("127.0.0.1","","");
mysqli_select_db($con,"function");
$sql="SELECT * FROM `ajax`";
$query=mysqli_query($con,$sql);
// Total number of database data $number
$number=mysqli_num_rows($query);
for($i=0;$i<$number;$i++){
    // Converting each data into an associative array and printing it out
    $arr=mysqli_fetch_row($query);
    //print_r($arr);
    //echo $arr[2];die;
    if($_GET['num']==$arr[2]){
        Echo: "Find Employees: Number $arr [2], Name: $arr [1], Position: $arr [3]";
        break;
    }
}
 ?>

3.Формат JSON

(1) json: представление объектов JavaScript.

(2) JSON-это грамматика для хранения и обмена текстовой информацией, аналогичная xml. Используйте Пару значений ключа Способ организации прост для людей для чтения и машинного анализа.

(3) JSON не зависит от языка. Любой язык может анализировать json, если он следует правилам json.

(4) JSON меньше по длине, чем xml; JSON может читать и писать быстрее; JSON можно использовать Прямой анализ встроенного метода JS Преобразование в объект JS очень удобно.

(5) Правила грамматики JSON: Данные JSON записываются в следующем формате: Пары Имя/значение 。

Имена в комбинациях пар имя/значение пишутся спереди (в двойных кавычках), пары значений сзади (также в двойных кавычках), разделенные двоеточиями, например "Имя": "Ван Дахаммер" 。 Будьте осторожны JSON отличается от представления объектов JavaScript. Ключевое значение представления объектов JavaScript не нуждается в кавычках, но ключевое значение JSON нуждается в кавычках.

Будьте осторожны JSON может быть целым числом, с плавающей запятой, строкой (в двойных кавычках), логическим значением (true или false), массивом (в квадратных скобках), объектом (в фигурных скобках), нулем и другими типами данных.

Возьми каштан:

{// Defines a JSON object
  "Staff": [// Defines an array
    {"name": "Wang Dahammer", "age": 21}, // defines a name object
    {name":"beast","age": 35}
  ]
}

(6) Синтаксический анализ JSON: Eval () и JSON. parse () анализируются в форме JSON

Сравнение двух методов: Предлагается использовать метод JSON. parse () для анализа в форму JSON.

Eval (); небезопасно, если в JSON есть функция или программный код JS (предупреждение или окно. местоположение. href () перейти по ссылке на вирусный сайт и т.д.), код будет выполнен первым, опасная операция. JSON. parse (); имеет функцию проверки файла JSON, если в файле JSON есть программный скрипт, он проанализирует ошибку.

Возьми каштан:

var jsondata='{
    "staff":[{
            "Name": "Wang Dahammer".
            "age":22
        },
        {
            "Name": "Beast".
            "age":23
        },
        {
            "Name": "Wang Nima".
            "age":24
        }
    ]
}';

Var jsonobj = JSON. parse (jsondata); //JSON. parse parses JSON
Var jsonobj = Eval ('('+ jsondata +')'); //eval parses JSON

alert(jsonobj.staff[0].name);

Будьте осторожны Писать на нем неправильно, просто чтобы ясно видеть. Запятая-это не разделитель, запятая-это текстовое содержимое, все должно быть написано компактно, а не ради того, чтобы четко видеть искусственное разделение пространства. (Здесь была обнаружена часовая ошибка.)

(7) Инструмент проверки JSON: JSONLint

(8) Поднимите каштан:

Using json, you first need server-side conventions.
With this method, more judgments can be reduced and displayed in a more elegant form.
{
    // Front-end rule validation and back-end data validation
    "Success": true, /// correct execution (rule validation such as forms)
    "Msg": "* *" // / whether the response value of the request was successful (information returned by the HTTP response)
}

Код детали на стороне сервера:

// echo "parameter error, employee information is incomplete";
Echo'{"success": false, "msg": "parameter error, employee information is not complete"};

if($query){
    // echo "Employee:"$_POST["username"]. "Information saved successfully! ";
    Echo'{"success": true, "msg": "employees save successfully"};
}else{
    // echo "Employee:" $_POST ["username"]. "Failed to save information! ";
    Echo'{"success": false, "msg": "staff save failure"};
}

Код JSON на стороне клиента: Другие остаются неизменными, преобразуя текст ответа (текстовую форму) из ответа на стороне сервера в (форму JSON), преобразуя строку JSON в данные объекта JSON, а затем обрабатывая данные как объект.

request.onreadystatechange=function(){
        if(request.readyState===4){
            if(request.status===200){
                // Convert the response Text (text form) of the server-side response to (JSON form)
                // Converting a JSON string into a JSON object data
                var data=JSON.parse(request.responseText);
                if(data.success){
                    document.getElementById("createResult").innerHTML=data.msg;
                }else{
                    Document. getElementById ("createResult"). innerHTML="Error"+data.msg;
                }
            }
        }
    }

4. AJAX в jQuery

(1) использование jQuery для реализации Ajax-запросов: функция: избегайте проблем совместимости, простого кода, быстрой и удобной работы.

(2) Грамматика: jQuery. Ajax ([настройки])

Тип: Введите “ОПУБЛИКОВАТЬ” или “ПОЛУЧИТЬ” по умолчанию “ПОЛУЧИТЬ”.
Url: Адрес, по которому был отправлен запрос.
Данные: объект, данные которого отправляются на сервер вместе с запросами.
Тип данных: Тип данных, которые, как ожидается, будут возвращены сервером. Если не указано, jQuery будет автоматически оценивать разумно на основе информации MIME пакета HTTP. Как правило, мы используем формат JSON, для которого можно установить значение “json”.
Успех: это метод, который запрашивает уничтоженную функцию после успеха. Передайте возвращенные данные и строку, содержащую код успеха.
Ошибка: это метод, который вызывается при сбое запроса. Передается объект XMLHttpRequest.

Время обновления: 2018/2/13 23:36:53

1.Фонд AJAX

2.PHP и АЯКС

3.Формат JSON

4. AJAX в jQuery

Читайте ещё по теме: