一、什么是AJAX?
1.英文全称Asynchronous JavaScript And XML,翻译为中文就是异步的JS和XML技术
2.是用来改善用户体验的技术,提高用户的体验度。
3.AJAX的本质是利用浏览器内置的一个特殊对象(XMLHttpRequest),异步的向服务器发送请求。服务器一般只需要返回部分数据,
浏览器利用这些数据进行布局的更新,整个过程页面无刷新,不打断用户操作,提高用户体验度。
传统的注册:1.销毁当前提交表单的页面,如果失败,就会返回一个新的和之前一模一样的页面,但是数据需要全部重新填写,新页面上什么也没有。
2.此时如果网络通信比较差,我们表单提交的数据提交到服务端又没有返回新的页面,此时用户只能处于等待状态,什么事情也做不了。
(因为提交表单会把当前页面进行销毁,而因为网络原因服务端还没有返回新的页面。)
3.传统做法因为需要返回一个新的页面,导致消耗了大量的网络资源。
二、如何获取AJAX对象?
function getXhr(){
var xhr=null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr= new ActiveXObject("Microsoft.XMLHttp");
}
return xhr;
}
三、AJAX对象重要的属性以及方法。
1.onreadystatechange:绑定事件处理函数,当状态发生改变时的事件控制。
例如:xhr.onreadystatechange=f1();
2.readyState:分为0 1 2 3 4 五个状态,其中状态4表示AJAX对象与服务端通信结束,完全接收到服务端相应的内容。
3.responseTest:接收服务端响应的文本。
4.responseXML:接收服务端响应的XML文件。
5.status(状态码):200表示成功。
四、AJAX编程步骤
1.获取AJAX对象
2.发送请求
方式一:get请求
2.1、创建AJAX对象与服务端通信
xhr.open(‘get‘,‘checkName.do?name=zhangsan&&password=123‘,true);
备注:true表示异步,false表示同步
2.2、AJAX对象绑定事件处理函数
xhr.onreadystatechange=function();
2.3、AJAX对象向服务端发送一个数据包
xhr.send(null);
方式二:post请求
2.1、 创建AJAX对象与服务端通信
xhr.open(‘post‘,‘checkName.do‘,true);
2.2、发送消息头
xhr.setRrequestHeader(‘content-type‘,‘application/x-www-form-urlencoded‘);
2.3、AJAX对象绑定事件处理函数
xhr.onreadystatechange=function();
2.4、AJAX对象向服务端发送一个数据包
xhr.send(name=zhangsan&&password=123);
3.编写服务端处理AJAX请求代码(写一个XXXServlet)
4.function f1(){
if(xhr.readyState==4){
var text = xhr.responseText;(如果是XML文件 var xml= xhr.responseXML);
}
}