Ajax学习

介绍

AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。
不是一种新技术，是如下几种技术的组合应用：
基于web标准（standards-based presentation）XHTML+CSS的表示；
使用 DOM（Document Object Model）进行动态显示及交互；
使用 XML 和 XSLT 进行数据交换及相关操作；
使用 XMLHttpRequest 进行异步数据查询、检索；
使用 JavaScript 将所有的东西绑定在一起。
Ajax本质上是一个浏览器端的技术。

问题：

目前来，所有的请求的发送都是通过浏览器自己直接进行发送，
响应是浏览器在接收到响应信息后自主的将响应数据覆盖当前页面显示。现在，要求在保留原有页面内容的情况下显示新的响应内容。

解决:

使用ajax技术
ajax原理:
请求由ajax引擎对象发送，响应数据，浏览器不会直接进行处理，
而是流转给发请求的ajax引擎对象。
这样我们可以通过操作ajax引擎对象变相的实现在页面中显示新
的响应资源。

通过异步模式，提升了用户体验
优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用

现在几乎所有的B/S软件项目都会增加Ajax，从而提高用户体验度。最典型的应用：Google Maps!
本质：
js的DOM操作中的数据由程序员自己写死声明，变成从服务器动
态的获取。
使用：

1. 创建ajax引擎对象
   var ajax;
   if(window.XMLHttpRequest){ajax=new XMLHttpRequest//火狐 谷歌
   }else if(window.ActiveXObject){
   ajax=new ActiveXObject(“Msxml2.XMLHTTP”);//ie
   }

原理

2. 声明ajax监听函数

ajax.onreadystatechange=function(){
//判断数据状态码
if(ajax.readyState==4){//4 表示响应数据成功接收
//判断响应状态码
if(ajax.status==200){
//获取响应数据
//普通文本
//json格式数据
var data=ajax.responseText;
//xml数据
//var doc=ajax.responseXML;
var data=ajax.responseText;
//处理响应数据(js的DOM操作)
var
showdiv=document.getElementById("showdiv");
showdiv.innerHTML=data;
}else if(ajax.status==404){
var
showdiv=document.getElementById("showdiv");
showdiv.innerHTML="请求资源未找到";
}else if(ajax.status==500){
var
showdiv=document.getElementById("showdiv");
showdiv.innerHTML="服务器繁忙";
}
}}
3 创建并发送请求
ajax.open(method,url,async)
ajax.send("请求数据")

解释:
method：表示请求的方式，值为get/post
url:表示请求地址，一般为要请求的servlet的别名。
async:表示异步还是同步请求，true表示异步，false表示同步，
默认为异步。
Ajax的两种传参方式
注意：

• 如果请求方式是get方式，则请求数据需要拼接在url的后面，
  以？隔开，键值对。并且send中要写null
  get方式提交经常会遇到浏览器缓存问题，浏览器不对同样的url重复提交。这时可以在url后面增加参数：
  ?rand = Math.random() 或者：rand = new Date()

• 如果是post请求方式，则在send方法中书写请求数据即可。并
  且要声明数据的提交格式为键值对。
  示例：

//使用get方式
ajax.open(“get”,“user?uname=”+uname,true);
ajax.send(null);
//post方式
ajax.open(“post”,“user”, true);
//设置请求数据的格式
ajax.setRequestHeader(“Content-Type”,"application/x-www-form-urlencoded
");ajax.send(“un=”+uname);

request.open(“post”,url);
req.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”);
req.send(“a=3&b=中国”);

Ajax接受数据的几种方式

4 ajax的响应数据格式普通文本：
后台在接收到ajax请求后，处理后直接响应普通字符串给ajax
josn数据：
后台在接收到ajax请求后，处理后响应json格式的字符串给
ajax
ajax处理代码中使用eval()方法将json数据转换为js对的对象，
将对象中的数据通过js的dom操作显示到页面中。
注意：
json格式：
var 对象名={
键名:值,
键名:值,
…
}

5.JSON

服务器端	sb.append(“var a= {name:‘朱元璋’,age:32,zhiye:‘皇帝’}; var b = [{age:1,name:‘a’},{age:2,name:‘b’},{age:3,name:‘c’}];");
客户端	eval(xmlHttp.responseText); //利用eval函数将返回的文本转化成js对象alert(a.name);

xml数据：
后台在接收到ajax请求后，处理后响应xml格式的字符串给
ajax。
前台使用ajax.responseXML进行数据接收，返回的是xml文
档对象(document)。
使用document对象将xml中取出并显示到页面中即可
注意：
后台的响应数据格式必须设置成xml格式：resp.setContentType(“text/xml;charset=utf-8”);
注意：
ajax是前端的技术，由浏览器进行解析执行。
使用流程（原生）：
1 创建ajax引擎对象
2 覆写onreadystatechange函数
判断数据状态码
判断响应状态码
获取响应数据
处理响应信息
3 创建并发送请求
封装：
相同的保留，不同的传参。最终封装成一个js文件。

---

jquery中的ajax：
使用方式：
1 $.get(url,data,fn)
2 $.post(url,data,fn)
3 $.ajax({
type:“get”,url:“data”,
success:function(data){
alert(data);
}
})
注意：
$.get和$.post方式中的data为json格式的请求数据
以上三种方式，请求成功后的回调函数中的形参表示响应的数据。

创建ajax程序的基本流程(1.html)

1. 创建XMLHttpRequest对象
   var request;
   if (window.XMLHttpRequest) { // Mozilla,…
   request = new XMLHttpRequest();
   }else if (window.ActiveXObject) { // IE
   request = new ActiveXObject(“Msxml2.XMLHTTP”);
   }
2. 使用XMLHttpRequest对象创建请求
   request.open(“get”, “testAjaxServlet" );
3. 监视response的状态，写回调函数处理服务器返回的数据
   request.onreadystatechange = function(){
   if(request.readyState==4){
   var result = request.responseText; //得到服务器端返回的数据
   document.getElementById(“div2”).innerHTML=result; //局部刷新
   }
   };
4. 使用XMLHttpRequest对象发送请求
   request.send(null); //如果不写null,火狐会报错。

信息