其他分享
首页 > 其他分享> > AJAX详解

AJAX详解

作者：互联网

AJAX 是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术，通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新
1.1 XMLHttp对象的使用，各个状态值的意思
XMLHTTP.readyState 五种状态
HTTP 请求的状态.当一个 XMLHttpRequest 初次创建时，这个属性的值从 0 开始，直到接收到完整的 HTTP 响应，这个值增加到 4。（参照1-4）

1.2 使用后端服务层调用
客户端请求 --> 服务端响应HTML --> 用户在网页上进行操作(即请求） --> 服务器响应操作（新页面或ajax)

1-1 一个完整的HTTP请求过程，有下面七个步骤
（1）建立TCP连接
（2）web浏览器向web服务器发送请求命令
（3）web浏览器发送请求头部信息
（4）web服务器做出应答
（5）web服务器发送头部应答信息
（6）web服务器想浏览器发送数据
（7）web服务器关闭TCP连接

1-2 一个HTTP请求一般由四部分组成
（1）HTTP请求的方法或动作，比如是GET还是POST请求
（2）正在请求的URL，总得知道请求的地址是什么
（3）请求头，包含一些客户端环境信息，身份验证信息等
（4）请求体，也就是请求正文，请求正文中可以包含客户（浏览器）提交的查询字符串信息，表单信息等等

1-3 GET请求和POST请求
（1）GET请求
① 一般用于信息获取
② 使用URL传递参数
③ 对所发送信息的数量也有限制，一般在2000个字符
（2）POST请求
① 一般用于修改服务器上的资源
②对所发送信息的数量无限制

1-4 XMLHttpRequest 对象的三个重要属性
（1）onreadystatechange 属性
onreadystatechange属性存有处理服务器响应的函数
例如：定义一个空的函数，对onreadystatechange的属性进行设置
xmlHttp.onreadystatechange = function(){
//此处需要写一些代码
}

（2）readyState属性
        readyState存有服务器响应的状态信息。当readyState改变时，onreadystatechange函数会被执行

  5 个状态中每一个都有一个相关联的非正式的名称，下表列出了状态、名称和含义
（2-1）0      Uninitialized    初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。（请求未初始化）
（2-2）1      Open                open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。（请求初始化）
（2-3）2      Sent                  Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。（请求传输中）
（2-4）3      Receiving         所有响应头部都已经接收到。响应体开始接收但未完成。（请求已发送）
（2-5）4      Loaded             HTTP 响应已经完全接收。（请求已响应）
  如：我们要向这个 onreadystatechange 函数添加一条 If 语句，来测试我们的响应是否已完成（意味着可获得数据）
   ![图片](https://www.icode9.com/i/ll/?i=2021032115543754.png)

（3）responseText属性
         可以通过 responseText 属性来取回由服务器返回的数据
        例如：在我们的代码中，我们将把时间文本框的值设置为等于 responseText
   

提示：
    responseText：你向ajax后台的程序发送xmlHttp请求的时候，后台程序接到请求会进行处理,处理结束后，可以返回一串数据给前台,这个就是responseText，responseText属性包含了从服务器返回的文字信息。这些信息其实就是所请求的页面

1-5 浏览器对Ajax的兼容

注：也可以同过if判断来写浏览器对Ajax的兼容，但上面的写法更好

ajax的实现总结：
AJAX基本实现步骤
一、客户端

  1. 创建XMLHttpRequest对象(需要考虑各浏览器兼容的问题)

注：这段代码基本上不用怎么改变

2.设置回调函数： 向 onreadystatechange 函数添加一条 If 语句，来测试我们的响应是否已完成（意味着可获得数据），并通过responseText属性来取回服务器返回的数据

result.innerText = ‘姓名：’ + obj.username + ‘, 密码：’ + obj.pwd + ‘, 联系方式：’ + obj.email + ‘, 电子邮箱：’ + obj.phone+ ‘, 是否审核：’ + obj.is_audit;
注：（1）是否审核：’ + obj.is_audit判断服务器返回来的是不是布尔型数据
（2）如果readyState为4，表示响应已经被完全接收
（3）如果获得的结果状态代码为200，表示服务端正常返回
（4）if(200 == xmlHttp.status){
// 客户端响应代码
}

  1. 使用XMLHttpRequest对象打开一个连接(指定连接方式<post/get>和连接地址以及是否同步)
    （1）post请求方式

（2）get请求方式

注：根据实际情况选post或get请求其中一个，也可以两个都选

获取params的函数

if ((‘button’ != currEl.type) && (‘text’ == currEl.type || ‘password’ == currEl.type || ‘phone’ == currEl.type || ‘email’ == currEl.type)) {
params += currEl.name + “=” + currEl.value + ‘&’
}
注：调用XMLHttpRequest对象的open方法。第一个参数是提交数据的方式，取值为post/get；第二个参数是提交的目标页面(也就是用于处理提交数据的页面)；第三个参数指定是否请求是异步的-缺省值为true，为了发送一个同步请求，需要把这个参数设置为false。

  1. 设置请求的头部(请求的类型和请求的编码格式)

  2. 发送请求，调用XMLHttpRequest对象的send方法实现数据的发送
    判断：如果params不为空，则发送请求

  3. 更新页面元素的显示
    在发送数据到服务端之后，服务端处理完会返回客户端一个响应，我们在客户端所设定的回调函数实际上就是对事件的处理，当readystate属性发生变化的时候都会触发事件处理函数，如果readystate变成了4并且响应的状态码是200的话，那么则表示服务端正常返回了信息。这个时候我们就能够获得服务端的响应信息并进行相对应的处理

标签：web,HTTP,请求,响应,AJAX,详解,responseText,onreadystatechange
来源： https://blog.csdn.net/wk_txy/article/details/115050450