ajax基础 和 Jquery的ajax

ajax：通讯对象，浏览器的内置异步对象，默认情况下没有被创建出来
IE中的对象叫ActiveXObject，高版本的ie才叫XMLHttpReques，两者均可使用
其他浏览器叫XMLHttpRequest


判断浏览器类型：网上搜吧


原理：当触发有ajax功能的事件时，会将请求发送给浏览器内置异步对象，经过包装后发送给服务器，之后服务器处理后以 流 的形式发送给浏览器内置异步对象。流的方式有字节流、字符流

一般步骤：

这里是要根据浏览器的类型来创建ajax对象，不同的浏览器有不同的ajax对象，本质相同，但是名字可能不同

function createAJAX(){
var ajax = null;
try{
ajax = new ActiveXObject("microsoft.xmlhttp");//ie的ajax对象
}catch(e1){
ajax = new XMLHttpRequest();//firefox的ajax对象
}
return ajax;
}

1.创建ajax对象，var  ajax = createAJAX();

2.准备发送请求， var method="GET/POST";//get请求的数据是放在请求行里面,因此数据体中为null
   get情况下--->    var url="${pageContext.request.contextPath}/action路径?名=值";

    ajax.open(method,url);

3.发送请求，是发送请求体的数据 ajax.send();
  （1）如果method是get，请求体中无数据，就用null表示
  （2）如果是post，就send(内容),但是要设置请求头，他会将请求体中的汉字按utf-8编码发送，否则服务器接收不到此内容

在open和send方法之间，ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");

4.调用api监听服务器响应  
  当ajax状态变化(即1->2才算，4->4不算)后，才出触发此函数，ajax状态一般有5种,不同于web 的响应码
ajax.onreadstatechange() = function{
if(ajax.readState == 4)
{
if(ajax.status == 200)//200表示正常
{
5.从服务端获取响应回来的数据，var tmp = ajax.responseTest;或者ajax.responseXML;获取数据
  服务端要设置response.setContentType("text/html;charset=UTF-8"); xml数据的话就是是"text/xml"

6.将结果按照DOM规则，动态添加到web指定标签中
}
}
}

IE可能会因为每次的url相同而不发送ajax请求

解决方法：在请求头里加个当前时间属性，即url?time=...

其他浏览器不会

ajax异步提交，提交的是url里的值，跟表单提交无关，即表单那里action写不行无所谓

Jq中的ajax

给<button>标签添加点击事件，可以触发ajax

$(":button").onclick(function(){
var url="路径";

方式一：$("写你要将接收到的内容存储的标签").load(url); //get方式


也可+参数
var sendDate={ //要传给服务器的参数
key:value; //要json格式的参数
}
$("写你要将接收到的内容存储的标签").load(url,sendDate); //post方式


也可+函数
$("写你要将接收到的内容存储的标签").load(url,sendDate,function(backDate,textStatus,xmlHttpRequest){
参数一：backDate表示返回的数据，如果是html数据则为字符串，如为json数据，为对象
参数二：textStatus表示返回状态的文本描述，如success，false
参数三：浏览器中传统ajax对象，可以通过xmlHttpRequest.status调用,值同参数二，为字符串
}
);

});


也可单独使用 

方式二：$.post(url,sendData,function(backData,testStatus,xmlHttpRequest){})
方式三：$.get(url,sendData,function(backData,testStatus,xmlHttpRequest){})


方式四：
$.ajax(
{
type   : "post",
url    : "",
data   : {key : value ,key : value,}, //发送到服务端的值，是个json类型
success: function(backDate,textStatus,xmlHttpRequest)
}
);


如果json中属性太多，可以采用 Jq对象.serialize()方法，自己动生成json格式的文本，但是必须在form标签元素中，此方法会自己扫form表单下的标签中的name值，作为属性


Jq解析xml
var $xml = $(xml).find("xml中的标签");
$xml.each(function(){
var a = ${this}.text();
});