原生Ajax
1.1 Ajax简介
- Ajax全称为Asynchronous Javascript And XML，即异步JS和XML
- 通过Ajax可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据
- AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式
1.1.1传统的b/s操作，客户端执行的是与服务器端的同步操作，必须等待服务器有返回信息后才能在客户端显示出来，而是客户端有明确的刷新过程。
-
在AJAX的工作中，在传统的浏览器端，服务器端的基础上，添加了一个称为AJAX引擎的中间层，来实现异步的数据传输。**
-
AJAX引擎，主要是通过一个XMLHttpRequest对象实现的。
1.3 AJAX 的特点
1.3.1 AJAX的优点
- 可以无刷新页面与服务端进行通信
- 允许你根据用户事件来更新部分页面内容
1.3.2 AJAX 的缺点
- 没有浏览历史，不能回退
- 存在跨域问题（同源）
- SEO不友好（爬虫获取不到信息）
1.4 AJAX 的使用
XMLHttpRequest对象
-
通过XMLHttpRequest，AJAX可以像桌面应用程序一样，只同服务器进行数据层面的交互，而不用每次都刷新页面。这样，即减轻了服务器的负担，又加快了响应速度，缩短了用户等待的时间。
-
XMLHttpRequest是AJAX中最重要的一个对象。
-
XMLHttpRequest在IE5中，就已经实现了，而且在不同浏览器中是兼容的。所以，在开发中可以通过固定的方法来获得。
XMLHttpRequest对象的主要方法
XMLHttpRequest对象的主要属性
AJAX编码步骤
1．创建XmlHttpRequest对象
2．注册状态监控回调函数
3．建立与服务器的异步连接
4．发出异步请求
发送请求函数
function check(obj){
var name = obj.value;
var xmlHttp=createXMLHttpRequest();
var url = "Login?method=check&name="+name+"×="+new Date().getTime();
xmlHttp.open("get",url,true);
xmlHttp.onreadystatechange=jieguo；
xmlHttp.send();
};
处理返回信息函数
Function jieguo(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
var spa = document.getElementById("spa");
var text = xmlHttp.responseText;
if(text=="scuss"){
spa.innerHTML="用户已存在";
}else{
spa.innerHTML="用户可以使用";
alert(text);
}
}
};
};
S
请求方法
//利用post方法传参
xhr.open("post","CheckServlet",true); xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.onreadystatechange=processResult;
xhr.send("user="+user);
//利用get方法传参
var url="CheckServlet?user="+user;
xhr.open("get",url,true);
xhr.onreadystatechange=processResult;
xhr.send(null);
服务器返回数据
PrintWriter out=response.getWriter();//获得流
out.print(res);//向页面返回数据
out.flush();//刷新流
out.close();//关闭流
jQuery中的AJAX
2.1 get请求
$.get(url, [data], [callback], [type])
url: 请求的URL地址
data: 请求携带的参数
callbac: 载入成功时回调函数
type：设置返回内容格式，xml、html、script、json、text、_default