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请求过程，一般有下面七步骤

一、  创建tcp链接

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

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

四、  web服务器应答

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

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

七、  web服务器关闭tcp链接

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

 

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

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

 

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

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

 

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

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

注意书写顺序

 

• get与post

 

get：

一、  通常用于信息获取，查询

二、  使用URL传递参数

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

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

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

post：

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

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

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

 

 

 

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

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

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

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

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

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

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

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

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

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

 

• XMLHttpRequest发送请求

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

二、   send（string【get能够不填写或许null，post就必定要填写参数，不然无心义】）

这些方法能够将请求发送到服务器

 

• XMLHttpRequest取得响应

一、   responseText：得到字符串形式的响应数据

二、   responseXML：得到XML形式的响应数据

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

四、   getAllResponseHeader（）：获取全部的响应报头

五、   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**

 

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

 

xhr.status //状态码

xhr.statusText //状态码信息

 

二、获取响应头

 

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

 

三、响应主体

 

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请求方式的差别（面试题）

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

二、GET能够经过在请求URL上添加请求参数

三、POST能够经过xhr.send('name=itcast&age=10')

四、POST须要设置

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

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