说一说创建ajax过程？

[问答题]

说一说创建ajax过程？

得分点

new XMLHttpRequest()、设置请求参数open()、发送请求request.send()、响应request.onreadystatechange

参考答案

标准回答

创建ajax过程：

创建XHR对象：new XMLHttpRequest()
设置请求参数：request.open(Method, 服务器接口地址);
发送请求: request.send()，如果是get请求不需要参数，post请求需要参数request.send(data)

监听请求成功后的状态变化：根据状态码进行相应的处理。

XHR.onreadystatechange = function () { 
  if (XHR.readyState == 4 && XHR.status == 200) { 
      console.log(XHR.responseText); 
    // 主动释放,JS本身也会回收的 
    XHR = null; 
  } 
};

加分回答

POST请求需要设置请求头

readyState值说明

0：初始化,XHR对象已经创建,还未执行open

1：载入,已经调用open方法,但是还没发送请求

2：载入完成,请求已经发送完成

3：交互,可以接收到部分数据

4：数据全部返回

status值说明

200：成功

404：没有发现文件、查询或URl

500：服务器产生内部错误

延伸阅读

Ajax封装

function Ajax(type, url, data, success, failed) {
  // 创建ajax对象
  var xhr = null;
  if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
  } else {
    xhr = new ActiveXObject('Microsoft.XMLHTTP')
  }

  var type = type.toUpperCase();
  // 用于清除缓存
  var random = Math.random();

  if (typeof data == 'object') {
    var str = '';
    for (var key in data) {
      str += key + '=' + data[key] + '&';
    }
    data = str.replace(/&$/, '');
  }
  if (type == 'GET') {
    if (data) {
      xhr.open('GET', url + '?' + data, true);
    } else {
      xhr.open('GET', url + '?t=' + random, true);
    }
    xhr.send();

  } else if (type == 'POST') {
    xhr.open('POST', url, true);
    // 如果需要像 html 表单那样 POST 数据，请使用 setRequestHeader() 来添加 http 头。
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.send(data);
  }

  // 处理返回数据
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
      if (xhr.status == 200) {
        success(xhr.responseText);
      } else {
        if (failed) {
          failed(xhr.status);
        }
      }
    }
  }
}

编辑于 2021-09-15 12:11:59 回复(0)

kodnicolas

ajax是异步js和xml结合的一种异步请求，首先要创建xmlhttprequest一个实例，然后利用实例的open方法创建一个请求，配置改请求的地址和头部配置。利用该实例的send方法进行请求的执行

发表于 2023-10-20 17:20:50 回复(0)

huang阿贵

let xmlHttp = new XMLHttpRequest()
xmlHttp.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true)

xmlHttp.send()

xmlHttp.onreadystatechange = function() {
	if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
		console.log(xmlHttp.responseText)
	}
	console.log(xmlHttp)
}

发表于 2023-04-21 10:40:34 回复(0)

dara羽星

（1）. 什么是ajax
ajax的全程翻译为中文的话就是异步js和xml，是利用xmlhttprequest技术构建更复杂，动态的网页的编程实践，主要用来实现客户端与服务器端的异步通信，实现页面的局部刷新。网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面

（2）. 如何实现一个ajax
1.创建一个xmlhttprequest对象
2.向服务器发送请求
利用open初始化一个请求
利用send发送请求
3.处理服务器响应，使用方法readyStatechange监测状态变化，如果状态变化，调用回调函数，加入readyState是4并且>300响应码>200，或者等于304，那么就执行成功的回调，否则就执行失败的回调
(3) readystate的含义：
图片说明
(4) status的含义:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status
(5)get和post的区别
使用post请求方式的时候，还需要在open和send方法之前调用setRequestHeader，设置http请求头的内容
(6)完整代码以及注释

// 1. 创建一个xml对象，使用XMLHttpRequest()方法，ie的话是new ActiveObject('Microoft.XMLHTTP')
var xmlHttp
if (window.XMLHttpRequest) {
    xmlHttp = new XMLHttpRequest()
} else {
    xmlHttp = new ActiveXObject('Microsoft.XMLHTTP')
}
if (option.type.toLowerCase() === 'get') {
    // 2. 调用open指定发送的类型和地址
    xmlhttp.open('GET', url);
    //3.发送请求
    xmlhttp.send();
} else if (option.type.toLowerCase() === 'post') {
    xmlhttp.open('POST', url);
    // 4. 如果是post的话还需要设置http请求头的内容，位于open和send之间
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.send(str);
}
// 5. 处理服务器的响应，使用readyStatechange监测状态的变化，触发回调函数
// 6. 如果readyState是4，并且响应码处于200,300，或是等于304，就执行成功的回调
xmlHttp.onreadyStateChange = function () {
    // 返回一个 XMLHttpRequest  代理当前所处的状态（0 unsent 1opened 2 已经调用send了 3下载中 4下载完毕done）
    if (xmlHttp.readyState == 4) {
        // 服务器返回的状态码
        if (xmlhttp.status >= 200 && xmlhttp.status < 300 ||
            xmlhttp.status === 304) {
            console.log(xmlhttp.responseText)
        }
    } else {
        console.log(xmlhttp.status)
    }
}

发表于 2022-01-25 14:28:13 回复(0)