Overview and implementation process of Ajax

1. Overview of ajax

1. Ajax is the abbreviation of Asynchronous ([ə'sɪŋkrənəs) JavaScript XML. It is not a new technology, but a comprehensive utilization of existing technologies. This technology can request additional data from the server without refreshing the page, bringing a better user experience

2. The core of Ajax technology is the XMLHttpRequest object (XHR for short), which is a feature first introduced by Microsoft. Before the advent of XHR, Ajax-style communication had to be achieved with some hacks, mostly using hidden frames or inline frames.

3. XHR provides a smooth interface for sending requests to the server and parsing server responses. Being able to obtain more information from the server asynchronously means that after the user clicks, new data can be obtained without refreshing the page. That means you can use the Refresh the page to get data from the server, but it is not necessarily XML data

2. Operation: native ajax and ajax encapsulated in jQuery

1. Native ajax:

ajax function: send a request (set request setRequest) and receive a response (getResponse)

A, ajax native way to send requests:

The most important and fixed part of Ajax is the http request.

1) Establish a connection: (IE7 and above versions support XMLHttpRequest)

var xhr = new XMLHttpRequest(); //Create an asynchronous request object

2) Get request: The format must be (url?name1=value1&name2=value2 )

xhr.open("get","01-register.php?name="+name);//初始化异步get请求
xhr.send(null); //与服务器建立连接

3) Post request

xhr.open('post','01-XMLHTTPRequest-test.php');//请求报文行
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); /*post请求设置请求头*/
xhr.send('name=rose&age=20'); //请求报文体

4) The difference between get and post requests:

★get does not need to set the request header, while post needs to set the request header

★get data The transfer is done through the url, and the post data is passed in the send method

B. Receive the response in the ajax native way:

/*监听服务器的响应*/
xhr.onreadystatechange=function(){
/*判断当前的响应是否成功 1.服务器做出了响应 2.响应的结果是正确的*/
 if(xhr.status==200 && xhr.readyState==4){
 var result=xhr.responseText;
 console.log(result); //输出从服务器中获取到的数据
 //接下来就可以对数据进行相应的处理了
 }
 };

C. Process the response data:

/*监听*/
xhr.onreadystatechange=function(){
if(xhr.status==200 && xhr.readyState==4){ /*判断状态*/
var result;
/*获取响应报文中的Content-Type*/
var ct=xhr.getResponseHeader("Content-Type");
/*判断Content-Type,进行数据的解析*/
if(ct.indexOf("xml") != -1){
result=xhr.responseXML;
}
else if(ct.indexOf("json") !=-1){
result=JSON.parse(xhr.responseText);
}
else{
result=xhr.responseText;
}
/*调用回调函数--委托--代理*/
success && success(result);
}
};

Ajax encapsulated in jQuery

$.ajax({
type: 请求方式(get/post),
url: "register.php",
data: 发送请求数据,
beforeSend:function(){返回false可以取消本次ajax请求},
success:function(result){ 成功响应后调用 },
error:function(err){ 错误响应时调用 },
complete:function(){ 响应完成时调用(包括成功和失败) }
});

jQuery provides a special method to serialize the form:

$('form').serialize(): //Serialize the form (i.e. format key=val & key=val);

3. Response

We need to monitor the response status of the server, and then process the data obtained from the server accordingly.

1) onreadystatechange is one of the JavaScript events, used to monitor the status of XMLHttpRequest

2) readystate: response status, returns the current status of the XMLHTTP request

3) status: the server’s response code

common Response code: 200 — The server successfully returns to the webpage

404 — Request webpage does not exist.