关于javascript:Ajax总结

37次阅读

共计 6043 个字符，预计需要花费 16 分钟才能阅读完成。

AJAX 是什么？

3. 它的全称是 Asynchronous JavaScript and XML   (翻译过去是异步的 JavaScript 和 XML) 
4. 它是一门前后端的通信技术，不是语言，这一技术无需刷新页面就能够从服务器获得数据，意思就是能够部分刷新，无需加载整个网页，用户体验十分好

AJAX 的原理是什么？

10. 简略来说，通过 XMLHttpRequest 对象来向服务器发送异步申请，从服务器取得数据，而后用 js 来操作 dom 而更新页面。这其中最最要害也最最重要的一步就是从服务器取得申请数据，所以咱们先理解一下 XMLHttpRequest

Ajax 的利用场景

16. 页面上拉加载更多数据  
17. 列表数据无刷新分页  
18. 表单项来到焦点数据验证  
19. 搜寻框提醒文字下拉列表

XMLHttpRequest 是 ajax 的外围机制，先说说它的属性和办法：

1.readyState 属性

 状态：0    未初始化
 1    筹备发送
 2    已发送但还未收到响应
 3    正在承受
 4    承受实现

2.responseText 属性

    服务器响应的文本内容   
    联合 readyState 属性来看:
  1. readyState = 4 时，responseText 才蕴含残缺的响应信息
  2. readyState = 3 时，responseText 蕴含不残缺的响应信息
  3. readyState < 3 时，responseText 为空字符串

3.responseXML 属性

 服务器响应的 XML 内容对应的 DOM 对象

4.status 属性（服务器返回的 http 的状态码）及statusText 属性（状态码的文本信息）

41.  status = 200    胜利 
42.  status = 404    未找到 
43.  status = 500    服务器外部谬误

5.onreadystatechange 事件

 当 readyState 属性发生变化时触发此事件，用于触发回调函数  
 onreadystatechange 是一个事件句柄.
 它的值 (state_Change) 是一个函数的名称，当 XMLHttpRequest 对象的状态产生扭转时，会触发此函数。状态从 0 到 4 进行变动。仅在状态为 4 时，咱们才执行代码。

6.open()办法

  1. open（method，url，async，username，password）
  2. method：必须    提交形式 GET/POST/PUT… 规定必须大写
  3. url：申请的服务器的地址
  4. async：布尔值，示意是否采纳异步办法，默认为 true 异步，false 为同步
  5. username，password 可不指定，它们别离提供 http 认证机制须要的用户名和明码。

7.send()办法

  1. send(content)     content 能够指定为 null 示意不发送数据，其内容能够是 DOM 对象，输出流或字符串
  2. 调用 open 办法后，能够调用 send()办法来向服务器发送申请，当 open 中的 async 为 true 时，send()办法调用后会立刻返回

8.setRequestHeader()办法

 setRequestHeader(header，value)
         用来设置申请的指定头部信息，此办法需在 open()办法当前调用，否则会失去异样，个别在 Post 形式中应用

9.getResponseHeader()办法

 当 readyState > 2 时，该办法用来检索响应的头部信息，否则返回一个空字符串
 getAllResponseHeaders()办法就是返回所有的 HttpResponse 头部信息

10.abort()办法

 进行以后 http 申请。对应的 XMLHttpRequest 对象会复位到未初始化的状态。

AJAX 的根本步骤：

1. 创立 XMLHttpRequest 对象

> var xhr = null;
>     if(window.XMLHttpRequest){   // 如果 window 底下有这个属性，间接应用
>         xhr = new XMLHttpRequest()    // 除 IE5 IE6 以外的浏览器  XMLHttpRequest 是 window 的子对象 
>     }else{// IE5 IE6 是以 ActiveXObject 的形式引入 XMLHttpRequest 对象的
>         xhr = new ActiveXObject("Microsoft.XMLHTTP")  // 老版本的 IE，ie6 及以下
>     }`

2. 绑定事件监听函数

var xhr = null;
    if(window.XMLHttpRequest){   // 如果 window 底下有这个属性，间接应用
        xhr = new XMLHttpRequest()    // 除 IE5 IE6 以外的浏览器  XMLHttpRequest 是 window 的子对象}else{// IE5 IE6 是以 ActiveXObject 的形式引入 XMLHttpRequest 对象的
        xhr = new ActiveXObject("Microsoft.XMLHTTP")  // 老版本的 IE，ie6 及以下
    }

3. 建设连贯

xhr.open("GET","02.json",true);
    // 申请形式为 get，申请的服务器地址为 02.json，异步

4. 发送音讯申请

// 4. 发送音讯申请
    // xhr.send(发送的参数)
    xhr.send(null);

Ajax 运行原理及实现

Ajax 运行原理
Ajax 相当于浏览器发送申请与接管响应的代理人，以实现在不影响用户浏览页面的状况下，部分更新页面数据，从而进步用户体验。

服务器端响应的数据格式
在实在的我的项目中，服务器端大多数状况下会以 JSON 对象作为响应数据的格局。当客户端拿到响应数据时，要将 JSON 数据和 HTML 字符串进行拼接，而后将拼接的后果展现在页面中。
在 http 申请与响应的过程中，无论是申请参数还是响应内容，如果是对象类型，最终都会被转换为对象字符串进行传输。

JSON.parse() // 将 json 字符串转换为 json 对象

申请参数传递

传统网站表单提交

<form method="get" action="http://www.example.com">
     <input type="text" name="username"/>
     <input type="password" name="password">
 </form>
 <!– http://www.example.com?username=zhangsan&password=123456 -->

GET 申请形式

xhr.open('get', 'http://www.example.com?name=zhangsan&age=20');

POST 申请形式

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') xhr.send('name=zhangsan&age=20');

申请报文
在 HTTP 申请和响应的过程中传递的数据块就叫报文，包含要传送的数据和一些附加信息，这些数据和信息要恪守规定好的格局。

申请参数的格局

  1. application/x-www-form-urlencoded
 name=zhangsan&age=20&sex= 男
  1. application/json
{name: 'zhangsan', age: '20', sex: '男'}

在申请头中指定 Content-Type 属性的值是 application/json，通知服务器端以后申请参数的格局是 json。

JSON.stringify() // 将 json 对象转换为 json 字符串

留神：get 申请是不能提交 json 对象数据格式的，传统网站的表单提交也是不反对 json 对象数据格式的。

获取服务器端的响应

Ajax 状态码
在创立 ajax 对象，配置 ajax 对象，发送申请，以及接管完服务器端响应数据，这个过程中的每一个步骤都会对应一个数值，这个数值就是 ajax 状态码。

0：申请未初始化(还没有调用 open())
1：申请曾经建设，然而还没有发送(还没有调用 send())
2：申请曾经发送
3：申请正在解决中，通常响应中曾经有局部数据能够用了
4：响应曾经实现，能够获取并应用服务器的响应了

xhr.readyState // 获取 Ajax 状态码

onreadystatechange 事件

当 Ajax 状态码发生变化时将主动触发该事件。
在事件处理函数中能够获取 Ajax 状态码并对其进行判断，当状态码为 4 时就能够通过 xhr.responseText 获取服务器端的响应数据了。

// 当 Ajax 状态码发生变化时
 xhr.onreadystatechange = function () {
     // 判断当 Ajax 状态码为 4 时
     if (xhr.readyState == 4) {
         // 获取服务器端的响应数据
         console.log(xhr.responseText);
     }
 }

两种获取服务器端响应形式的区别

Ajax 错误处理

  1. 网络畅通，服务器端能接管到申请，服务器端返回的后果不是预期后果。
    能够判断服务器端返回的状态码，别离进行解决。xhr.status 获取 http 状态码
  2. 网络畅通，服务器端没有接管到申请，返回 404 状态码。
    查看申请地址是否谬误。
  3. 网络畅通，服务器端能接管到申请，服务器端返回 500 状态码。
    服务器端谬误，找后端程序员进行沟通。
  4. 网络中断，申请无奈发送到服务器端。
    会触发 xhr 对象上面的 onerror 事件，在 onerror 事件处理函数中对谬误进行解决。

低版本 IE 浏览器的缓存问题
问题：在低版本的 IE 浏览器中，Ajax 申请有重大的缓存问题，即在申请地址不发生变化的状况下，只有第一次申请会真正发送到服务器端，后续的申请都会从浏览器的缓存中获取后果。即便服务器端的数据更新了，客户端仍然拿到的是缓存中的旧数据。

解决方案：在申请地址的前面加申请参数，保障每一次申请中的申请参数的值不雷同。

 xhr.open('get', 'http://www.example.com?t=' + Math.random());

Ajax 异步编程

Ajax 封装

问题：发送一次申请代码过多，发送屡次申请代码冗余且反复。
解决方案：将申请代码封装到函数中，发申请时调用函数即可。

ajax({ 
     type: 'get',
     url: 'http://www.example.com',
     success: function (data) {console.log(data);
     }
 })
    • *

$.ajax 的应用

[AJAX——外围 XMLHttpRequest 对象](http://blog.csdn.net/liujiahan629629/article/details/17126727)，而 JQuery 也对 Ajax 异步操作进行了封装，这里看一下几种罕用的形式。$.ajax，$.post，$.get，$.getJSON。

一，$.ajax

这个是 JQuery 对 ajax 封装的最根底步，通过应用这个函数能够实现异步通信的所有性能。也就是说什么状况下咱们都能够通过此办法进行异步刷新的操作。然而它的参数较多，有的时候可能会麻烦一些。看一下罕用的参数：
 var configObj = {

       method   // 数据的提交形式：get 和 post

       url   // 数据的提交路劲

       async   // 是否反对异步刷新，默认是 true

       data    // 须要提交的数据

       dataType   // 服务器返回数据的类型，例如 xml,String,Json 等

       success    // 申请胜利后的回调函数

       error   // 申请失败后的回调函数

    }

$.ajax(configObj);// 通过 $.ajax 函数进行调用。

异步删除的例子：

    1.  <span >          // 删除  
    2.                  $.ajax({  
    3.                      type : "POST",  // 提交形式  
    4.                      url : "${pageContext.request.contextPath}/org/doDelete.action",// 门路  
    5.                      data : {6.                          "org.id" : "${org.id}"  
    7.                      },// 数据，这里应用的是 Json 格局进行传输  
    8.                      success : **function**(result) {// 返回数据依据后果进行相应的解决  
    9.                          **if** (result.success) {10.                              $("#tipMsg").text("删除数据胜利");  
    11.                              tree.deleteItem("${org.id}", **true**);  
    12.                          } **else** {13.                              $("#tipMsg").text("删除数据失败");  
    14.                          }  
    15.                      }  
    16.                  });  
    1~~~~7.  </span>

二，$.post

    这个函数其实就是对 $.ajax 进行了更进一步的封装，缩小了参数，简化了操作，然而使用的范畴更小了。$.post 简化了数据提交形式，只能采纳 POST 形式提交。只能是异步拜访服务器，不能同步拜访，不能进行错误处理。在满足这些状况下，咱们能够应用这个函数来不便咱们的编程，它的次要几个参数，像 method，async 等进行了默认设置，咱们不能够扭转的。url: 发送申请地址。data: 待发送 Key/value 参数。callback: 发送胜利时回调函数。type: 返回内容格局，xml, html, script, json, text,_default。

三，$.get

 和 $.post 一样，这个函数是对 get 办法的提交数据进行封装，只能应用在 get 提交数据解决异步刷新的形式上，应用形式和上边的也差不多。

四，$.getJSON

这个是进一步的封装，也就是对返回数据类型为 Json 进行操作。里边就三个参数，须要咱们设置，非常简单：url,[data],[callback]。
在惯例表单的解决中，咱们应用框架 Struts2 能够通过域驱动模式进行主动获取封装，那么通过 ajax, 如何进行封装呢？这里 JQuery 有一个插件，Jquery Form，通过引入此 js 文件，咱们能够模拟表单 Form 来反对 Struts2 的域驱动模式，进行主动数据的封装。


~~~~

正文完
javascript
发表至： javascript
2020-09-05
 0
关于javascript:教练怎么在vue项目里写react
关于javascript:最适合Java程序员的ES6教程6000字大量案例多练好懂
关于javascript:JavaScript-12种设计模式汇总
云开发0基础训练营第二期热力来袭