Ajax
1、什么是Ajax
Ajax即Asynchronous Javascript And XML(异步JavaScript和XML),使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上,而 不需要重载(刷新)整个页面,这使得程序能够更快地回应用户的操作。
2、它能解决的问题
- b/s建构:请求-响应 :在处理注册页面 需要页面局部刷新。以前的话注册需要刷新整个页面,把请求发送给服务器,然后通过response去告知结果。而ajax可以 解决传统web的请求方法的弊端。
- 同步(synchorized):为了安全,但是效率慢,用户体验不好。
- 异步:高效的,不需要全部提交,就可以局部刷新。
3、XMLHTTPRequest对象
ajax的本质就是 使用浏览器的一个内置对象 XMLHttprequesr向服务器发起请求,服务器会返回一个xml数据,文本或者json给浏览器,然后在浏览器,局部刷新渲染数据到页面,整个页面不需要完全刷新。
XMLHTTP是一组API函数集,可被JavaScript、JScript、VBScript以及其它web浏览器内嵌的脚本语言调用,通过HTTP在浏览器和web服务器之间收发XML或其它数据。
4、实现Ajax
4.1、获得xhr对象
function getXHR() {
let xhr = null;
// 根据不同的浏览器,去构建不同的对象
if ((typeof(XMLHttpRequest))!='undefined'){
// 非IE浏览器
xhr=new XMLHttpRequest();
} else {
// IE
xhr = new ActiveXObject('Microsoft.XMLHttp');
}
return xhr;
}
4.2、get方法发送
checkName = function (username) {
// 1、获得内置对象
let xhr = getXHR();
// 2、请求有两种:get和post,俩种写法不一样
// get ---> xhr.open('get','请求的地址','是否使用异步(asyn)的方式')
xhr.open('get', 'checkUsername?username=' + username, true);
// 3、监听器--ajax建立关联
/* 注册一个监听器(当事件发生以后,告诉xhr,xhr通过(请求的)状态码,得到监听的事件
使用xhr的onreadystate,让一个函数来处理这个事件,并且函数里面会返回请求的数据,
更新页面)*/
xhr.onreadystatechange = function () {
// 判断状态码
// 0 xhr对象还未初始化完毕
// 1 xhr对象开始发送请求
// 2 xhr对象请求发送完毕
// 3 xhr对象开始读取响应数据
// 4 xhr对象读取响应对象结束
// Http状态吗
// 200 服务器正确的响应了请求
// 302 重定向返回302的状态码
// 404 资源路径不可达
// 405 请求方法错误
// 500 服务器错误--->一般是代码有问题
if (xhr.readyState === 4 && xhr.status === 200) {
// 获取服务器返回的数据:以前是传递整个网页,现在得到一个xml或者文本数据
let txt = xhr.responseText;
// let xml = xhr.responseXML;
// 渲染页面
let mySpan = document.getElementById('s1');
mySpan.innerText = txt;
}
}
// 4、发送请求
xhr.send(null);
}
4.3、post方法发送
checkName2 = function (username){
// 1、获得内置对象
let xhr = getXHR();
// 2、定义请求规则
xhr.open('post','checkUsername',true);
// 3、绑定请求监听器
// 设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.onreadystatechange = function (){
if (xhr.readyState ===4 &&xhr.status===200){
let txt = xhr.responseText;
// 渲染页面
let mySpan = document.getElementById('s1');
mySpan.innerText = txt;
mySpan.style.color = 'green'
}
}
// 4、发送请求
xhr.send('username='+username);
}