一、Ajax简介
Ajax全称是,Asynchronous JavaScript + XML(异步JavaScript和XML), 其本身不是一种新技术,是现有技术集合成的一个方法。当使用结合了这些技术的AJAX模型以后, 网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面。这使得程序能够更快地回应用户的操作。
Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。
二、用到的技术
1.使用CSS和XHTML or HTML页面显示
2. 使用DOM模型来交互和动态显示
3.使用XMLHttpRequest来和服务器进行异步通信
4.使用javascript来绑定和调用
AJAX 的核心是 XMLHttpRequest 对象,而且不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的
IE 浏览器使用 ActiveXObject,而其他的浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象
二、XMLHttpReques
XMLHttpRequest 对象用于在后台与服务器交换数据,它允许网页在不影响用户的操作的情况下更新页面的局部内容。
构造函数:
该构造函数用于初始化一个 XMLHttpRequest
对象。在调用其他方法之前,必须先调用该构造函数,或通过其他方式间接得到一个 XMLHttpRequest
对象。
常用属性:
1.XMLHttpRequest.onreadystatechange
当 readyState 属性发生变化时调用的 EventHandler
返回 一个无符号短整型(unsigned short)数字,代表请求的状态码
返回一个 DOMString
,该 DOMString
包含对请求的响应,如果请求未成功或尚未发送,则返回 null
返回一个无符号短整型(unsigned short)数字,代表请求的响应状态
常用方法:
如果请求已被发送,则立刻中止请求
初始化一个请求。该方法只能在 JavaScript 代码中使用
发送请求。如果请求是异步的(默认),那么该方法将在请求发送后立即返回
4.XMLHttpRequest.setRequestHeader()
设置 HTTP 请求头的值。您必须在 open()
之后、send()
之前调用 setRequestHeader()
方法
三、js原生实现
实现AJAX,有如下四步:
1.创建XMLHttpRequest对象。
2.设置请求方式及参数。
3.调用回调函数(非异步无)。
4.发送请求。
//第一步:创建XMLHttpRequest对象
var xmlHttp = new XMLHttpRequest();
//第二步:初始化一个请求,设置请求方式及参数,true表示异步处理
var url = 'xxxxxx';
xmlHttp.open('POST', url, async);
if (async) {
//第三步:调用回调函数
xmlHttp.onreadystatechange = stateChangeHandler;
} else {
stateChangeHandler();
}
function stateChangeHandler () {
if (xmlHttp.readyState === 4) {
if (xmlHttp.status === 200) {
console.log(xmlHttp.responseText);
} else {
alert("ajax服务器返回错误!");
}
}
}
//发送请求
var params = 'userName=' + document.getElementsByName('userName')[0].value + "&userPass=" + document.getElementsByName("userPass")[0].value;
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=UTF-8");
xmlHttp.send(params);
本文章参考了https://blog.csdn.net/weixin_37580235/article/details/81459282部分内容。