AJAX编程（一）

全称Asynchronous Javascript And XML，AJAX 不是一门的新的语言，而是对现有技术的综合利用。 本质是在HTTP协议的基础上以异步的方式与服务器进行通信。

 

1、异步Asynchronous

指某段程序执行时不会阻塞其它程序执行，其表现形式为程序的执行顺序不依赖程序本身的书写顺序，相反则为同步。

其优势在于不阻塞程序的执行，从而提升整体执行效率。

 

2、XMLHttpRequest

浏览器内建对象，用于在后台与服务器通信(交换数据) ， 由此我们便可实现对网页的部分更新，而不是刷新整个页面。

XMLHttpRequest可以以异步方式的处理程序。

2.1 请求

/*js 内置的 http 请求对象  XMLHttpRequest*/

    /*1.初始化对象*/
    var xhr = new XMLHttpRequest;

    /*2.请求部分*/
    /*请求行*/
    xhr.open('post','端口地址');

    /*请求头*/
    //get  没有必要设置
    //post 必须设置 Content-Type: application/x-www-form-urlencoded
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

    /*请内容*/
    /*3.发送请求*/
    //若为get传输方式，则可以传null
    xhr.send("name=saber&weapon=excalibur");

 2.2 响应

1.调用onreadystatechange事件，监听XMLHttpRequest的状态

2.判断状态，是否完成/请求是否成功

    /*readyState用于检测响应是否完成*/

    /**readyState** **0：请求未初始化（还没有调用 open()）。 **1：请求已经建立，但是还没有发送（还没有调用 send()）。 **2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。 **3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。 **4：响应已完成；您可以获取并使用服务器的响应了。
 　**/

    if(xhr.readyState == 4 && xhr.status == 200){
        /*把内容渲染在页面当中*/
        document.querySelector(dom).innerHTML = xhr.responseText;
    }

3.获取响应

获取状态行

xhr.status/xhr.statusText 状态码/状态信息

获取响应头

xhr.getResponseHeader(“Content-Type”);

xhr.getAllResponseHeaders();

响应主体

xhr.responseText

xhr.responseXML

2.3 常见API汇总

xhr.open() 发起请求，可以是get、post方式
xhr.setRequestHeader() 设置请求头
xhr.send() 发送请求主体        get方式使用xhr.send(null)
xhr.onreadystatechange = function () {} 监听响应状态
xhr.status表示响应码，如200
xhr.statusText表示响应信息，如OK
xhr.getAllResponseHeaders() 获取全部响应头信息
xhr.getResponseHeader('key') 获取指定头信息
xhr.responseText、xhr.responseXML都表示响应主体

2.4 GET和POST请求方式的差异

1、GET没有请求主体，使用xhr.send(null)

2、GET可以通过在请求URL上添加请求参数

3、POST可以通过xhr.send('name=itcast&age=10')

4、POST需要设置

5、GET效率更好（应用多）

6、GET大小限制约4K，POST则没有限制

 

 

转载于:https://www.cnblogs.com/dwsj/p/5708528.html