JS DOM中Ajax的使用

Posted yuanjunjundebo

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS DOM中Ajax的使用相关的知识,希望对你有一定的参考价值。

一、概念

全称:Asynchronors javascript XML  异步JS数据交换格式。

【Asynchronous】:异步的,即在执? AJAX 请求时不会阻塞后?代码的运?。
【JavaScript】:使? JavaScript 实现浏览器与服务器之间的数据交互。
【XML】:?种数据结构,AJAX 创建之初在与服务器进?数据交换时,使?的数据结构就是 XML。但是现在已经慢慢被 JSON 数据结构所取代。

二、步骤

1. 创建 XMLHttpRequest 对象。

//1、:创建 XMLHttpRequest 对象。
let xhr = new XMLHttpRequest();

考虑到浏览器版本的不同,做出简单的判断

let xhr;
if(window.XMLHttpRequest){
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执?代码
xhr = new XMLHttpRequest();
} else {
// IE6, IE5 浏览器执?代码
xhr = new ActiveXObject( ‘Microsoft.XMLHTTP‘ );
}

 

2. 打开连接。

格式:

xhr.open(method, url, async);
/**
*method:数据接收方式,GET/POST
*url:数据链接,JSON格式
*async:是否异步,JS的特性本身为异步,所以通常设为默认值“true”
*/

例子:

 xhr.open("get", "https://getman.cn/mock/getStudents/data.json", true);

3. 发送 HTTP 请求。

xhr.send();

若为GET方式传输,则不用填参数,若为POST请求,传递的数据是放在 send ?法的参数中。

xhr.send("username=zhangsan&pwd=123");

 

 

4. 处理服务器返回的消息,实现局部刷新。

xhr.onreadystatechange = function(){
         let text = xhr.responseText;
         console.log( text );
}

状态值 readyState 都会发?改变
0:请求未初始化,即还没有调? send ?法;
1:服务器连接已建?,即已调? send ?法,正在发送请求;
2:请求已接收,即 send ?法执?完成;
3:请求处理中,即正在解析响应内容;
4:请求已完成,且响应已就绪,即响应内容解析完成,可以在客户端进?调?了;=>只有当状态值为 4 时,才表示请求完成
   
请求完成后,判断请求状态,状态码 status 为 200 时表示请求成功

完整代码:

xhr.onreadystatechange = function(){
     if(xhr.readyState == 4 && xhr.status == 200){
              let text = xhr.responseText;
              console.log( text );
      }
}

三、封装自己的Ajax

AJAX 的操作是?种固定的模式,这让我们想到,是否能够将其操作流程封装,让我们在以后
的使?过程中更加?便。

function ajax({
  url,
  success,
  data = {},
  type = "get",
  async = true
}) {
  let xhr;
  //1、:创建 XMLHttpRequest 对象。
  if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
  } else {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
  }
  //2、3、:打开连接。发送 HTTP 请求。(根据类型是 get 或者 post 来决定数据 data 不同的发送? 式)
  if ((type = type.toUpperCase()) == ‘GET‘) {
    xhr.open(‘get‘, url + ‘?‘ + jsonToString(data), true);
    xhr.send();
  } else{
    xhr.open(‘post‘, url, true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded "); //?般数据都以该?式传输
    xhr.send(jsonToString(data));
  }
  //4、:处理服务器返回的消息,实现局部刷新。
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
      if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
        let data = xhr.responseText
        success(data);
        // console.log(data);
        
      } else {
        // error && error();
      }
    };
  };
  //?来将数据由json对象转换成符合url查询部分格式的字符串,?便数据的传输
  function jsonToString(json) {
    var arr = [];
    for (var i in json) {
      arr.push(i + ‘=‘ + json[i]);
    };
    return arr.join(‘&‘);
  }
}

 

 

以上是关于JS DOM中Ajax的使用的主要内容,如果未能解决你的问题,请参考以下文章

JS DOM中Ajax的使用

通过DOM元素数据集将回调传递给js

前端开发中最常用的JS代码片段

angularJS使用ocLazyLoad实现js延迟加载

前端开发常用js代码片段

Javascript代码片段在drupal中不起作用