ajax运用实战写一个小例子处理请求数据

ajax详细了解及知道原理

问题：
目前来，所有的请求的发送都是通过浏览器自己直接进行发送，
响应是浏览器在接收到
响应信息后自主的将响应数据覆盖当前页面显示。现在，要求在保
留原有页面内容的情况下
显示新的响应内容。
解决:
使用ajax技术
ajax原理:
请求由ajax引擎对象发送，响应数据，浏览器不会直接进行处理，
而是流转给发请求的ajax引擎对象。
这样我们可以通过操作ajax引擎对象变相的实现在页面中显示新
的响应资源。
本质：
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表示同步，
默认为异步。
注意：
如果请求方式是get方式，则请求数据需要拼接在url的后面，
以？隔开，键值对。并且send中要写null
如果是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);
4 ajax的响应数据格式普通文本：
后台在接收到ajax请求后，处理后直接响应普通字符串给ajax
josn数据：
后台在接收到ajax请求后，处理后响应json格式的字符串给
ajax
ajax处理代码中使用eval()方法将json数据转换为js对的对象，
将对象中的数据通过js的dom操作显示到页面中。
注意：
json格式：
var 对象名={
键名:值, 键名:值,
........ }
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格式的请求数据
以上三种方式，请求成功后的回调函数中的形参表示响应的数据