1、是什么？
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术 。
ajax并非一种新的技术，而是几种原有技术的结合体。它由下列技术组合而成。
1.使用CSS和XHTML来表示。
2. 使用DOM模型来交互和动态显示。
3.使用XMLHttpRequest来和服务器进行异步通信。
4.使用javascript来绑定和调用。
在上面几中技术中，除了XmlHttpRequest对象以外，其它所有的技术都是基于web标准并且已经得到了广泛使用，XMLHttpRequest虽然目前还没有被W3C所采纳，但是它已经是一个事实的标准，因为目前几乎所有的主流浏览器都支持它。
2、作用
异步刷新
传统的网页，如果需要更新内容，必须加载整个网页。 如果只需要对网页上的某个内容进行局部刷新， 那么就需要使用到Ajax了。 它可以让我们无需重新加载全部网页内容，即可完成对某个部分的内容执行刷新 。 最典型的的例子， 莫过于大家在注册网站的时候， 输入的用户名，会自动的提示我们，该用户已被注册。
3、异步方式
4、用法
get
1）. 创建XMLHttpRequest 对象。 这部分创建对象的代码，由于需要针对不同的浏览器， 需要做出判断，并且还没有什么提示， 所以大家可以不用自己写。 往后直接拷贝即可。
function ajaxFunction(){
var xmlHttp;
try{ // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}catch (e){
try{// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
return xmlHttp;
}
2）. 发送请求
//不带数据，直接请求。
//获取 xmlhttprequest 对象
var request = ajaxFunction();
// 参数一： 执行 get 请求 ， 参数二 ： 请求的地址 ， 参数三： 是否是异步请求。
request.open("GET", "Demo01", true);
//发送请求。
request.send();
--------------------------------以下带上数据--------------------------------------
//获取 xmlhttprequest 对象
var request = ajaxFunction();
// 参数一： 执行 get 请求 ， 参数二 ： 请求的地址 ， 参数三： 是否是异步请求。
request.open("GET", "Demo01?name=zhangsan&age=18", true);
request.send();
post
Post请求 和 Get请求基本相似，区别就在于 数据传输方式不同。 Get方式是直接在地址的后面拼接的。 但是Post的方式是通过send 方法传输过去的。 并且还要设置一个请求头。
基本上，如果明白了Http的协议，那么对Post请求的代码理解起来就不是那么困难了。
1）. 创建XMLHttpRequest 对象。 这部分创建对象的代码，由于需要针对不同的浏览器， 需要做出判断，并且还没有什么提示， 所以大家可以不用自己写。 往后直接拷贝即可。
function ajaxFunction(){
var xmlHttp;
try{ // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}catch (e){
try{// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
return xmlHttp;
}
2）. 发送请求
//不带数据，直接请求。
//获取 xmlhttprequest 对象
var request = ajaxFunction();
// 参数一： 执行 get 请求 ， 参数二 ： 请求的地址 ， 参数三： 是否是异步请求。
request.open("POST", "Demo01", true);
//发送请求。
request.send();
--------------------------------以下带上数据--------------------------------------
//获取 xmlhttprequest 对象
var request = ajaxFunction();
// 参数一： 执行 get 请求 ， 参数二 ： 请求的地址 ， 参数三： 是否是异步请求。
request.open("POST", "Demo01", true);
//设置请求头，其实就是表示传输的是一个经过url编码的form表单数据
request.setRequestHeader("Content-Type" , "application/x-www-form-urlencoded");
request.send("name=zhangsan&age=18");
5、获取响应
onreadystatechange
数据提交到的两种请求Get 和 Post基本上都会使用后， 就应该想想获取数据的问题了。 前面我们都一直很无私的往服务器提交数据， 那么服务器返回的那些数据，我们又该怎么通过Ajax去拿呢?
这里就要靠xmlhttprequest的事件 onreadystatechange ， 这是用来监听我们请求的一些状态， 比如： 成功了还是失败了。 如果成功，想获取数据，得靠xmlhttprequest的responseText 或 responseXML 属性
完整例子：
//获取 xmlhttprequest 对象 代码跟以前一样。
var request = ajaxFunction();
// 参数一： 执行 get 请求 ， 参数二 ： 请求的地址 ， 参数三： 是否是异步请求。
request.open("GET", "url", true);
//对请求的状态 进行监听。
request.onreadystatechange = function(){
if(request.readyState == 4 && request.status == 200 ){
//设置节点id为 myDiv的标签 结果为 我们请求得到的响应文字
document.getElementById("myDiv").innerHTML=request.responseText;
}
}
//发送请求。
request.send();
实现案例：异步校验用户名
Ajax Get:
var request = ajaxFunction();
var name = document.getElementById("name").value;
request.onreadystatechange=function(){
if (request.readyState==4 && request.status==200){
var result = request.responseText;
if(result == 1){
document.getElementById("span1").innerHTML="<font color='red'>用户名已被占用</font>";
}else{
document.getElementById("span1").innerHTML="<font color='green'>用户名可以使用</font>";
}
}
}
request.open("GET", "RegisterServlet?name="+name, true);
request.send();
字符串比较：
if(result == '1'){
document.getElementById("span1").innerHTML="<font color='red'>用户名已被占用</font>";
}else{
document.getElementById("span1").innerHTML="<font color='green'>用户名可以使用</font>";
}
Ajax Post:
function checkName02(){
var request = ajaxFunction();
var name = document.getElementById("name").value;
request.onreadystatechange=function(){
if (request.readyState==4 && request.status==200){
var result = request.responseText;
if(result == '1'){
document.getElementById("span1").innerHTML="<font color='red'>用户名已被占用22</font>";
}else{
document.getElementById("span1").innerHTML="<font color='green'>用户名可以使用22</font>";
}
}
}
request.open("POST", "RegisterServlet", true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("name="+name);
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
