Ajax笔记

浏览器在后台通过发送get/post等请求，到服务器进行少量的数据交换后，返回服务器片后的数据（json);

在需要更新的节点下进行更新显示内容。

（也就是说在不重新加载整个网页的情况下，网页中的部分内容进行更新。）

1、XMLHttpRequest对象

所有的现代浏览器均支持XMLHttpRequest，（IE5/IE6:ActiveXObject);

<span style="color:#000000;">var xmlhttp;
if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
} else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}</span>

2、XMLHttpRequest的方法

xmlhttp.open(method,url,async);

    method:请求的类型;get/post

    url:文件在服务器上的位置

    async:true(异步），false（同步）

xmlhttp.send(string);

    string:仅用于post请求

xmlhttp.open("GET","test.html?time="+Math.random()+"&name=zhangsan",true);
xmlhttp.send();

xmlhttp.open("POST","test.html",true);
xmlhttp.setRequestHeader("Content-type","text/json;charset=UTF-8");
xmlhttp.send("name=zhangshan&password=123456");

xmlhttp.setRequestHeader(header,value);

    header:规定头的名称

    value:规定头的值

async = true;

xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("divid").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","test.html",true);
xmlhttp.send();

3.XMLHttpRequest对象的responseText或responseXML属性

responseText:获得字符串形式的响应数据

responseXML:获得XML形式的响应数据

var xmltest = xmlhttp.responseXML;
var texts = "";
var xmltext = xmltest.getElementsByTagName("ARTIST");
for (var i = 0;i<xmltext.length;i++) {
texts += xmltext[i].childNodes[0].nodeValue + "<br />";
}
document.getElementById("divid").innerHTML = texts;

4.onreadystatechange事件

当readyState改变时，就会触发onreadystatechange事件。

readyState属性存有XMLHttpRequest对象 的状态信息。

XMLHttpRequest对象的三个重要的属性：

xmlhttp.readyState:

0:请求未初始化

1：服务器连接已建立

2：请求已接收

3：请求处理中

4：请求已完成，且响应已就绪

xmlhttp.status:

200:"ok"

404:未找到页面

5.jQueryAJAX

由于不同的浏览器对AJAX的实现并不相同，须编写额外的代码对浏览器测试

jQuery解决了这个问题

jQuery load()方法

从服务器加载数据，并把返回的数据放入被选元素中

$(selector).load(url,data,callback);

data:与请求一同发送的查询字符串键、值对集合

callback :是load()方法完成后所执行的函数名称。

callback参数：

responseTxt:包含调用成功时的结果内容

statusTXT：调用 的状态

xhr:包含XMLHttpRequest对象

test.txt文件：

<h3>jQuery and Ajax</h3>
<p id="pid">helloworld!</p>

把“test.txt"中的id="pid"的元素的内容，加载到指定 的<div>元素中

$("button").click(function() {
$("#divid").load("test.txt #pid",function(responseTxt,statusTxt,xhr) {
if(statusTxt == "success")
alert("加载成功");
if(statusTxt == "error")
alert("error: " + xhr.status + ": " + xhr.statusText);
});
});

jQuery get()

$("button").click(function() {
$.get("test.txt",function(data,status) {
alert("data:"+data + "\nstatus:" +status);
});
});

Jquery post()

$("button").click(function() {
$.post("test.txt",
{
name:"zhangsan”，
password:"123456"
},
function(data,status) {
alert("data:" +data + "\nstatus:" + status);
});
});

6、jQuery ajax([settings])

settings:通过$.ajaxSetup()设置任何选项的默认值

参数：

options:

类型，Object,所有选项都是可选的

async:

类型，Boolean,异步,true

beforeSend(XHR):

类型，Function,XHR唯一参数

cache:

类型，Boolean(缓存页面)

默认值，true,dataType为script和jsonp时默认false

complete(XHR,TS):

类型，Function

参数，XMLHttpRequest对象

请求成功或失败后均调用

contentType:

类型：String

默认值：“application/x-www-form-urlencoded"

发送信息至服务器时内容编码类型

context:

类型;Object

回调函数上下文

data:

类型：String

发送到服务器的数据，将自动转换为请求字符串格式

dataFilter:

类型：Function

给ajax返回的原始数据进行处理的函数

参数，data是ajax返回的原始数据，type是调用jQuery.ajax时提供的datatype参数

dataTye:

类型：String

预期服务器返回的数据类型

"xml",可用jQuery处理

”html"，返回纯文本html信息

“script",返回纯文本javascript代码

"json",返回json数据

"jsonp",返回jsonp格式，”url?callback=?",jQuery将自动替换？为正确的函数名，以执行回调函数

"text",返回纯文本字符串

error:

类型，Function

自动判断（xml ，html),请求失败调用此函数

参数,XMLHttpRequest对象、错误信息、（可选）捕获的异常对象

错误信息，null,"timeout","error","notmodified"，"parsererror"

global:

类型，Boolean

是否触发全局ajax事件,true

ifModified:

类型,Boolean

仅在服务器数据改变时获取新数据，false

jsonp:

类型，String

在一个jsonp请求中重写回调函数的名字，替代“callback=?"

{jsonp:'onJsonPLoad'},会将"onJsonPLoad=?"传给服务器

jsonpCallback:

类型，String

为jsonp请求指定一个回调函数名

password:

类型，String

用于响应http访问请求的密码

processData:

类型，Boolean

默认，true,如果是对象，都会处理转化成一个查询字符串，以配合默认内容类型“application/x-www-form-urlencoded"

scriptCharset:

类型，String

通常只在本地和远程内容编码不同时使用

success:

类型，Function

请求成功的回调函数

参数，服务器返回，根据dataType参数进行处理后的数据

traditional:

类型,Boolean

如果想要用传统的方式来序列化数据，true

timeout:

类型,Numver

设置请求超时时间（毫秒)。

type:

类型,String

请求方式 ，默认”GET"

url:

类型，String

默认，当前页地址，发送请求的地址

username:

类型，String

用于响应HTTP访问认证请求的用户名

xhr:

类型：Function

需要返回一个XMLHttpRequest对象

示例：

function lzhajax(url,data,type,callback) {
$.ajax({
url:url,
data:data,
type:type,
beforeSend:function(xhr) {
xhr.setRequestHeader("sessionid",ssid);
},
success:function(result,textStatus,jqXHR) {
ssid = jqXHR.getResponseHeader("sessionid");
setCookie('ssid',ssid,1);
if(callback) {
callback(result);
}
}
});
});