1、Ajax异步网络请求

最新推荐文章于 2024-09-17 14:30:35 发布

zqk6442

最新推荐文章于 2024-09-17 14:30:35 发布

阅读量127

点赞数

文章标签： ajax javascript 网络

本文链接：https://blog.csdn.net/zqk6442/article/details/130247759

版权

文章目录

Ajax

1、 Ajax介绍

1.1 Ajax的概念

AJAX (Asynchronous Javascript And Xml ) 异步JavaScript和XML，是指一种创建交互式网页应用的网页开发技术, 可以访问服务器数据的局部刷新的技术. AJAX不是一种新的编程语言

1.2 Ajax的作用

允许客户端发送HTTP请求, 去异步请求服务器的数据来创建动态网页

1.3 前后端交互图

2、Ajax使用

2.1Ajax在JS中的使用

Ajax的核心

Ajax 技术核心是JavaScript对象XMLHttpRequest(简称XHR)

创建XHR对象

var xhr = new XMLHttpRequest();
console.log(xhr);  // XMLHttpRequest

XMLHttpRequest对象的属性和方法XHR提供的方法:
- open(): 准备好需要发送给服务器的内容.接收三个参数: 要发送的请求类型(get/post), 请求的URL和是否异步.如:
```
xhr.open('get', 'demo.json', true);  //URL为demo.json的get请求, true表示异步.
```
- send(): 向服务器发送请求.
  
  如: xhr.send(null);
XHR提供的属性:当请求发送到服务器端后, 服务器就会向客户端发送响应, 收到响应数据后, 响应的数据会自动填充XHR对象的属性. 一共有四个属性：
- status: 响应的HTTP状态码
- statusText: HTTP状态码的说明
- responseText: 作为响应主体被返回的文本
其中status属性: HTTP状态码, 一般我们只需要关心HTTP状态代码为200则表示请求服务器成功.

HTTP 状态码	状态字符串	说明
200	OK	服务器成功返回了页面
400	Bad Request	语法错误导致服务器不识别
401	Unauthorized	请求需要用户认证
404	Not found	指定的 URL 在服务器上找不到
500	Internal Server Error	服务器遇到意外错误，无法完成请求
503	ServiceUnavailable	由于服务器过载或维护导致无法完成请求

异步请求:

我们在实际项目开发中一般使用异步请求，使用异步调用的时候, 需要触发readystatechange事件, 然后检测readyState属性的值即可, readyState属性的值有5个, 最常用的是最后一个值:4, 表示已经接收到了全部响应数据.

值	状态	说明
0	未初始化	尚未调用 open()方法
1	启动	已经调用 open()方法，但尚未调用 send()方法
2	发送	已经调用 send()方法，但尚未接受响应
3	接受	已经接受到部分响应数据
4	完成	已经接受到全部响应数据

使用JS实现Ajax发送HTTP异步请求的代码

//创建xhr
var xhr = new XMLHttpRequest(); 
//使用open()方法, 设置true表示异步请求 
xhr.open('get', 'demo.json', true); 
//向服务器发送请求
xhr.send(null); 
//监听状态改变
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {  
          if (xhr.status == 200) {  
	  		  console.log(xhr.responseText); 
          } else {
	  		  consolel.log('error状态码: ' + xhr.status + '错误信息:'+ xhr.statusText);
          }
     }
};