ajax achieve specific learning record

Record their understanding of ajax \, and

We must first understand ajax to solve any problem, simply, is to the local refresh the page without refreshing the entire screen. For example, we now have a real-time display of heat, it is constantly changing, so you definitely want to keep the heat from them to obtain a database, display, but it is only updated heat, there is no need to update the entire interface. This time it uses ajax, constantly sends a request to the server to get the heat, then use js update the specified elements. It js how to update it?

Ang, in fact, directly with jquery on it, but still we will certainly have to learn ajax specifically to learn about how to achieve ah ~

ajax with the XMLHttpRequest, js, css, dom, xml technology implemented, wherein the two said:

XMLHttpRequest: js inside an object, can be connected to the server, send requests, etc., can be understood as a carrier, all the operations that we are ultimately performed by his.

xml: one language, in fact, almost sprinkle with html, but it is used to describe the format of structured data, is equivalent to a format of data storage switching, scalability, stronger, it has its unique data structure format.

Let's look at his specific steps it: divided into the following:

1. Build the XMLHttpRequest object

2. Set a callback function

3. Create a connection and server

4. The transmission request

1. Build the XMLHttpRequest object

Note that this step is to create different ways ie browsers and other browsers, ordinary browser directly create the object, ie browser to create ActiveObject object and set the parameters of the response, the following code, it is easy to understand

    if(window.XMLHttpRequest){    //非Ie浏览器
        this.req = new XMLHttpRequest();
    }else if(window.ActiveXObject){
        this.req = new ActiveXObject("Microsoft.XMlHTTP");
    }

, After the end of creation, we need to call the object's methods to accomplish asynchronous requests, and we will use it in the open and send methods,

open("method","url",【asyncFlag】,【username】,【password】);

method: mode request, get or post

Three back is optional, asynvFlag indicates whether the asynchronous request is generally true

send(params);

Returned directly sends the request of the current connection to the server, asynchronous, synchronous, then waits for the response end back, the params parameter, post requests when used, Also note that, sending post request, to use setRequestHeader ( "Content-Type" , "application / x-www-form-urlencoded"); parameter setting request header

And his four attributes:

the readyState: status of the request, from 0-4 sequentially show: uninitialized, Loading, loaded, interaction, complete

status: Http status code returned by the server,

responseText, responseXML: the server returns the content, format or XML format string, may be returned JSON

2. Specify the callback function:

Callback function, by definition, is the function performed by the server after a request has been handled, the function corresponding to the specific business logic.

XMLHttpRequest.onreadystatechange = function name;

Note the point: If there is a parameter of the function, write:

..... = function () {function name (params)};  

3. Establish connection to the server

Using the open () function on the line, url address of your server is requested

4. The transmission request,

Direct send (null), post request, then using Send (params), the format is a variable name = value & params variable name = value, such that the partition with &

So, overall it is quite easy to understand terms, the following is a complete example:

var net  = new Object();
//构造函数
net.AjaxRequest = function (url, onload, onerror, method, params) {
    this.req = null;
    this.onload = onload;
    this.method = method;
    this.onerror = (onerror)? onerror :this.defaultError;
    this.loadDate(url ,method, params);    //有了这一步所以才能创建实例就进行ajax交互

}
//初始化对象并指定处理函数的方法,prototype添加新的属性
net.AjaxRequest.prototype.loadDate=function (url,method,params) {
    if(!method){
        method="GET";
    }
    if(window.XMLHttpRequest){    //非Ie浏览器
        this.req = new XMLHttpRequest();
    }else if(window.ActiveXObject){
        this.req = new ActiveXObject("Microsoft.XMlHTTP");
    }
    if(this.req){
        try{
            var loader = this;
            this.req.onreadystatechange = function () {//指定回调函数
                net.AjaxRequest.onReadyState.call(loader);  //call就是说让onReadyState这个函数来执行this对象的函数
            }
            this.req.open(method, url ,true);     //创建连接
            if(method == "POST"){  //post\请求设置请求头
                this.req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            }
            this.req.send(params); //发送信息

        }catch (e) {
            this.onerror.call(this);
        }
    }
}

//重构回调函数
net.AjaxRequest.onReadyState = function(){
    var req = this.req;
    var readyState = req.readyState;
    if(readyState == 4){
        if(req.status == 200){
            this.onload.call(this);
        }else{
            this.error.call(this);
        }
    }
}

//重构默认错误处理函数
net.AjaxRequest.prototype.defaultError = function(){
    alert("错误数据，回调状态:"+this.req.readyState+"，状态："+this.status);
}

Then when we're using to build a net.AjaxRequest = function (url, onload, onerror, method, params), use this as an excuse, and reconstruction look like url, onload, and several other parameters, can create an object to achieve the reason ajax interaction, we used in the constructor function

this.loadDate (url, method, params);, this function is actually all the specific operation of our ajax integrated together,

Callback function to explain the process:

First, understand a.call (b) function is to allow a function to perform the function b, the equivalent function is to allow a reception function of the parameter b and b execution of work, two words: reconstruction

 net.AjaxRequest.onReadyState.call (loader); phrase specified callback function onReadyState, 

After this code this.onload.call (this); onload function is to allow incoming to reconstruct the function of the current meaning of this, where this refers to the callback function

This reconstruction over the past reconstruction is to code more clear some of it should be, but I feel even less clear,

The specific use of time,

va loader = new net.AjaxRequest (url, callback, error handler, the request method, other parameters ..):

After every predetermined time, or to execute the statement it can be based on specific rules,