AJAX的基本使用方法是什么
这篇"AJAX的基本使用方法是什么"文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇"AJAX的基本使用方法是什么"文章吧。
一. ajax 是什么
ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。ajax 通过在后台与服务器进行少量数据交换，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
二. 基本使用
function loadData() { let xhr; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText); } } xhr.open("GET","http://127.0.0.1:3001/users",true); xhr.send(); }3. 对上边代码进行讲解
3.1 创建XMLHttpRequest 对象
所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。创建 XMLHttpRequest 对象的语法：let xhr = new XMLHttpRequest();
老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：let xhr = new ActiveXObject("Microsoft.XMLHTTP");
所以为了应对所有的现代浏览器，包括 IE5 和 IE6，应该检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：
let xhr;if (window.XMLHttpRequest) { xhr = new XMLHttpRequest();} else { xhr = new ActiveXObject("Microsoft.XMLHTTP");}3.2 向服务器发送请求
xhr.open("GET","http://127.0.0.1:3001/users",true);xhr.send();（1）open(method,url,async) 方法规定请求的类型、URL 以及是否异步处理请求。
method：请求的类型；GET 或 POST
url：要访问的服务器上的位置
async：true（异步）或 false（同步）
（2）send(string) 将请求发送到服务器
参数string：仅用于 POST 请求
3.3 接收服务器的响应
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
responseText：获得字符串形式的响应数据
responseXML：获得 XML 形式的响应数据
3.4 onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。
（1）onreadystatechange：每当 readyState 属性改变时，就会调用该函数。
（2）readyState：存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
（3）status
200: "OK"
404: 未找到页面
（4）在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。当 readyState 等于 4 且状态为 200 时，表示响应已就绪。
注意： onreadystatechange 事件被触发 4 次（0 - 4）, 分别是： 0-1、1-2、2-3、3-4，对应着 readyState 的每个变化。
xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText); }}4. 其它方式
//第一个参数是请求路径，第二个参数是一个函数，当拿到数据后调用该函数function get(url,callback) { let xhr = new XMLHttpRequest(); //当请求加载成功之后要调用该函数 xhr.onload = function() { callback(xhr.responseText); } xhr.open('get',url) xhr.send();}get('http://localhost:3001/users',function (data) { console.log(data);});4.1 扩展
我们可以把上边那段代码改写成支持Promise的形式，这样就可以进行链式调用
function get(url) { return new Promise(function (resolve, reject) { let xhr = new XMLHttpRequest(); xhr.onload = function () { //使用JSON.parse()将拿到的数据转成JS对象 resolve(JSON.parse(xhr.responseText)); } xhr.open('get', url) xhr.send(); })}链式调用：
let data = {};get('http://localhost:3001/users') .then(function (userData) { data.user = userData; return get('http://localhost:3001/jobs') }) .then(function (jobsData) { data.jobs = jobsData; console.log(data);})以上就是关于"AJAX的基本使用方法是什么"这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注行业资讯频道。
