Home > Web Front-end > JS Tutorial > A brief discussion on jQuery asynchronous object (XMLHttpRequest)_javascript skills

A brief discussion on jQuery asynchronous object (XMLHttpRequest)_javascript skills

WBOY
Release: 2016-05-16 16:31:08
Original
1506 people have browsed it

Let’s first take a look at the five steps of asynchronous objects

This is requested by post,

Copy code The code is as follows:

//1.00Create asynchronous object
          var xhr = new XMLHttpRequest();
                    //2.0
                xhr.open("post", url,params, true);
//3.0 uses the Formdata attribute to pass parameters
               xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//4.0 Set callback function
                 xhr.onreadystatechange = function () {
If (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
                }
            }
                                                                                                                                                                                         //5.0 passing parameters
                 xhr.send(params);

Combine the get request to create an asynchronous object package

get

in request

xhr.setRequestHeader("If-Modified-Since", "0"); is to clear the cache

And post request

Copy code The code is as follows:

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

It’s for the transmission method
in
The type in can be obtained in three ways, including application/x-www-form-urlencoded

Copy code The code is as follows:

var ajaxHelp = {
    CreatXHR: function () {
        //创建异步对象
        var xhr = new XMLHttpRequest();
        return xhr;
    },
    //ajax的get请求
    AjaxGet: function (url, callBack) {
        this.AJaxCommon("get", url, null, callBack);
    },
    //ajax的post请求
    AjaxPost: function (url, params, callBack) {
        this.AJaxCommon("post", url, params, callBack);
    },
    AJaxCommon: function (method, url, params, callBack) {
        //1.0
        var xhr = this.CreatXHR();
        //2.0
        xhr.open(method, url, true);
        //3.0
        if (method == "get") {
            xhr.setRequestHeader("If-Modified-Since", "0");
        } else {
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        }
        //4.0
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var datas = JSON.parse(xhr.responseText);
                //执行回调函数
                callBack(datas);
            }
        }
        //5.0
        xhr.send(params);
    }
};

ps:在JQuery里面是有$.ajax  和$.get /   $.Post  等异步请求的方法的。以前的封装就不用了。额。好扯。其实他们底层也是这样的写的呢。JQuery就是为了解决各个浏览器的兼容性问题而已

以上就是本人对于jQuery异步对象(XMLHttpRequest)的理解,如有遗漏,麻烦联系我,补充上。

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template