应用原生Ajax请求服务器数据
视频
1、Ajax基本知识
(1) Ajax是异步的JavaScript和XML
(2) XML是可扩展标记语言
(3) Ajax不是新的编程语言，而是一种使用现有标准的新方法
(4) Ajax是与服务器交换数据并更新部分网页的技术，并且不需要重新加载整个页面
(5) Ajax可以是同步请求，也可以是异步请求。但是，大多数情况下，特指异步请求。因为同步的Ajax请求，对浏览器有阻塞效应
(6) 常用请求类型有GET、POST请求
2、创建Ajax对象的流程步骤
(1) 创建Ajax对象
(2) 创建请求状态变化监听事件接收服务器响应的数据
(3) 创建服务器连接
(4) 向服务器发出HTTP请求
具体实现代码如下：
//01-创建Ajax对象
var xhr = new XMLHttpRequest();
//02-创建请求状态变化监听事件接收服务器响应的数据
xhr.onreadystatechange = function () {
//获取Ajax状态码
var statusCode = this.readyState;
//在最后一个阶段获取服务器响应的数据
//当ajax对象的状态码为4并且http状态码为200，就获取服务器的数据
if (statusCode === 4 && this.status === 200) {
//获取服务器响应数据
var data = this.responseText;
console.log('data ==> ', data);
}
}
//03-建立服务器连接
//xhr.open(请求类型, 请求地址, 是否异步); 默认为异步，true: 异步, false: 同步
//假设请求地址：http://127.0.0.1:10000/pro
xhr.open('GET', 'http://127.0.0.1:10000/pro', true);
//04-4-发起Ajax请求
xhr.send();
3、请求与响应头获取与设置
(1) setRequestHeader()方法设置请求头信息
(2) getAllResponseHeaders()方法返回服务器发来的所有HTTP头信息
(3) getAllResponseHeaders()方法获取所有响应头信息
(4) getResponseHeader方法返回HTTP头信息指定字段的值，如果还没有收到服务器回应或者指定字段不存在，则该属性为null
对于POST请求，需要设置请求头，以便后台服务器截取请求体
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
4、Ajax请求状态码
(1) 0：请求未初始化，表示XMLHttpRequest实例已经生成，但是open()方法还没有被调用
(2) 1：服务器连接已经建立，表示send()方法还没有被调用，仍然可以使用setRequestHeader()，设定HTTP请求的头信息
(3) 2：请求已接收，表示send()方法已经执行，并且头信息和状态码已经收到
(4) 3：请求处理中，表示正在接收服务器传来的body部分的数据，如果responseType属性是text或者空字符串，responseText就会包含已经收到的部分信息
(5) 4：请求已经完成，并且响应成功，表示服务器数据已经完全接收，或者本次接收已经失败了
5、常用的HTTP状态码
(1) 200，OK，访问正常
(2) 301，Moved Permanently，永久移动
(3) 302，Move temporarily，暂时移动
(4) 304，Not Modified，未修改
(5) 307，Temporary Redirect，暂时重定向
(6) 401，Unauthorized，未授权
(7) 403，Forbidden，禁止访问
(8) 404，Not Found，未发现指定网址
(9) 500，Internal Server Error，服务器发生错误
(10) 502，Bad Gateway，无响应网关/代理
6、补充Ajax知识
(1) xhr.withCredentials = true; 请求时携带cookie
(2) xhr.responseType = 'json'; 设置响应数据类型, 默认为text，在这需要注意，如果设置此项，需要通过xhr.response获取服务器响应的数据
承担因您的行为而导致的法律责任，
本站有权保留或删除有争议评论。
参与本评论即表明您已经阅读并接受
上述条款。