Ajax简介

原生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. 可以无刷新页面与服务端进行通信
2. 允许你根据用户事件来更新部分页面内容

1.3.2 AJAX 的缺点

1. 没有浏览历史，不能回退
2. 存在跨域问题（同源）
3. 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+"&times="+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