Ajax编程（HTTP请求与响应及API）详解

AJAX编程

即 Asynchronous [e'sɪŋkrənəs] Javascript And XML， AJAX 不是一门的新的语言，而是对现有技术的综合利用。 本质是在HTTP协议的基础上以异步的方式与服务器进行通信。

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

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

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

• XMLHttpRequest

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

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

    /*1.怎么使用 这个内置对象*/
    var xhr = new XMLHttpRequest;

    /*2.怎么样去组请求*/
    /*请求的行*/
    xhr.open('post','01.php');

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

    /*请内容*/
    /*3.发送请求*/
    xhr.send("name=xjj&age=10");

http请求

• 一个完整的http请求过程，通常有下面七步骤

1、  建立tcp连接

2、  web浏览器向web服务器发送请求命令

3、  web浏览器发送请求头信息

4、  web服务器应答

5、  web服务器发送应答头信息

6、  web服务器像浏览器发送数据

7、  web服务器关闭tcp连接

• HTTP请求3个组成部分与XMLHttpRequest方法的对应关系

1、请求行：http请求的方法或动作，比如get或者是post请求，正在请求的URL，总得知道请求的地址是什么

xhr.open('post','01.php');

2、请求头：包含一些客户端环境信息，身份验证信息等

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//get请求可以不设置

3、请求主体：也就是请求正文，请求正文中可以包含客户提交的查询字符串信息，表单信息等等

xhr.send("name=xjj&age=10");
//get可以传空

注意书写顺序

• get与post

get：

1、  一般用于信息获取，查询

2、  使用URL传递参数

3、  对发送信息的数量也有限制，一般在2000个字符（4k左右）

4、  发送的信息任何人都是可见的（不安全）

5、  get请求是幂等，执行一次和一万次效果一样，影响相同

post：

1、  一般用于修改服务器上的资源。一般用作于发送表单数据，新建，修改，删除等等

2、  对所发送信息的数量无限制

3、  数据会嵌入到http的请求体中，安全

• 一个http响应一般由三部分组成

1、  一个数字和文字组成的状态码，用来显示请求是成功还是失败

a)      http状态码由三位数字构成，其中首位数字定义了状态码的类型：

b)      1xx：信息类，表示收到web浏览器请求，正在进一步的处理中

c)      2xx：成功，表示用户请求被正确接收，理解和处理例如：200 ok

d)      3xx：重定向，表示请求没有成功，客户必须采取进一步的动作

e)      4xx：客户端错误，表示客户端提交的请求有错误，例如：404 not found，意味着请求所引用的文档不存在

f)       5xx：服务器错误，表示服务器不能完成对请求的处理，例如：500

2、  响应头，响应头也和请求头一样包含许多有用的信息，例如服务器类型，日期时间，内容类型和长度等

3、  响应体，也就是响应正文

• XMLHttpRequest发送请求

1、   open（method【规定了发送的方式是get还是post】，url【必需，请求地址】，async【请求同步/异步（默认值true）】）

2、   send（string【get可以不填写或许null，post就一定要填写参数，否则无意义】）

这些方法可以将请求发送到服务器

• XMLHttpRequest取得响应

1、   responseText：获得字符串形式的响应数据

2、   responseXML：获得XML形式的响应数据

3、   status和statusText：以数字和文本形式返回http状态码

4、   getAllResponseHeader（）：获取所有的响应报头

5、   getResponseHeader（）：查询响应中的某个字段的值

 

注意书写顺序

HTTP响应是由服务端发出的，作为客户端更应关心的是响应的结果。

HTTP响应3个组成部分与XMLHttpRequest方法或属性的对应关系。

由于服务器做出响应需要时间（比如网速慢等原因），所以我们需要监听服务器响应的状态，然后才能进行处理。

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

1、获取状态行（包括状态码&状态信息）

xhr.status //状态码

xhr.statusText //状态码信息

2、获取响应头

xhr.getResponseHeader('Content-Type');
xhr.getAllResponseHeaders();

3、响应主体

xhr.responseText
xhr.responseXML

我们需要检测并判断响应头的MIME类型后确定使用request.responseText或者request.responseXML

readyState属性

• 0：请求未初始化，open还没有调用
• 1：服务器连接已建立，open已经调用了
• 2：请求已接受，也就是接收到头信息了
• 3：请求处理中，也就是接收到响应主体了
• 4：请求已完成，且响应已就绪，也就是响应完成了

onreadystatechange是Javascript的事件的一种，其意义在于监听XMLHttpRequest的状态

var xhr = new XMLHttpRequest();

        /*设置请求行*/

        xhr.open('get', '02.XMLHttpRequest.php');

        /*设置请求头*/

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

        /*设置请求主体并发送*/

        xhr.send(null);

        /*=========响应===========*/

        /*什么时候去接受后台的数据*/

        /*通过一些事件或者回调函数去监听*/

        /*通过去监听  通讯的状态*/

        /*通讯状态  就会有多个通讯的状态  请求发送前  请求中 响应中  响应完成 */

        xhr.onreadystatechange = function() {

                if (xhr.status === 200&xhr.readyState===4) {

                    console.log('获取响应的主体' + xhr.responseText);//做一些事情 xhr.responseText

                } else {

                    alert('响应失败');

                }
}

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都表示响应主体

注：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则没有限制