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

最新推荐文章于 2021-08-05 17:18:41 发布

weixin_30460489

最新推荐文章于 2021-08-05 17:18:41 发布

阅读量309

点赞数

文章标签： javascript 网络 ViewUI

原文链接：http://www.cnblogs.com/chrischan/p/6886930.html

版权

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

转载于:https://www.cnblogs.com/chrischan/p/6886930.html

weixin_30460489

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax编程（HTTP请求与响应及API）详解

AJAX编程即 Asynchronous [e'sɪŋkrənəs] Javascript And XML， AJAX 不是一门的新的语言，而是对现有技术的综合利用。本质是在HTTP协议的基础上以异步的方式与服务器进行通信。异步：指某段程序执行时不会阻塞其它程序执行，其表现形式为程序的执行顺序不依赖程序本身的书写顺序，相反则为同步。　　其优势...
复制链接

扫一扫