【AJAX的概述】:
Ø 什么是AJAX:
* AJAX:异步的 JavaScript And XML.
* 使用的是老的技术,用的是新的思想
Ø AJAX的功能:完成页面的局部刷新,不中断用户的体验.
【XMLHttpRequest】:
Ø 属性:
* readyState :XMLHttpRequest的状态
- 0 - (未初始化)还没有调用send()方法
1 - (载入)已调用send()方法,正在发送请求
2 - (载入完成)send()方法执行完成,已经接收到全部响应内容
3 - (交互)正在解析响应内容
4 - (完成)响应内容解析完成,可以在客户端调用了
* onreadystatechange :当XMLHttpRequest状态改变的时候触发一个函数.
* status :获得响应的状态码. 200 , 404 ...
* responseText :获得响应的文本数据.
*responseXML :获得响应的XML的数据
Ø 方法:
* open(请求方式,请求路径,是否异步) :异步去向服务器发送请求.
* send(请求参数) :发送请求.
* setRequestHeader(头信息,头的值) :处理POST请求方式的中文问题.
Ø 创建XMLHttpRequest对象:
* IE :将XMLHttpRequest对象封装在一个ActiveXObject组件.
* Firefox :直接就可以创建XMLHttpRequest对象.
使用纯ajax编写的代码先要识别浏览器类型
<script src="https://code.csdn.net/snippets/2586973.js"></script>
function createXmlHttp(){
varxmlHttp;
try{ //Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch(e){
try{// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
returnxmlHttp;
}
Ø GET方式提交请求:
function ajax_get() {
// 1.创建异步对象
var xhr =createXMLHttp();
// 2.设置状态改变的监听 回调函数.
xhr.onreadystatechange= function(){
if(xhr.readyState == 4){ // 请求发送成功
if(xhr.status== 200){ // 响应也成功
// 获得响应的数据:
var data = xhr.responseText;
// 将数据写入到DIV中:
document.getElementById("d1").innerHTML= data;
}
}
}
// 3.设置请求路径
xhr.open("GET","/day15/ServletDemo1?name=aaa&pass=123",true);
// 4.发送请求
xhr.send(null);
}
Ø POST方式提交请求:
function ajax_post(){
// 创建异步对象:
var xhr =createXMLHttp();
// 设置监听:
xhr.onreadystatechange= function(){
if(xhr.readyState == 4){
if(xhr.status== 200){
document.getElementById("d1").innerHTML= xhr.responseText;
}
}
}
// 打开路径:
xhr.open("POST","/day15/ServletDemo1",true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// 发送请求:
xhr.send("name=张三&pass=123");
}
这种纯ajax方式很少用,太麻烦,jquery中封装了ajax,使用这种方式多