ajax入门

1. Ajax的运行原理

1）同步与异步

同步：客户端发送请求到服务器端，当服务器响应之前，客户端都是卡死的状态，点击其他按钮均没有作用，只能等待服务器返回值。
异步：客户端发送请求到服务器端，发送完请求后客户端可以做自己的事情，也可以在再其他请求，代码可以等待服务器返回数据后再处理。

2）ajax运行原理

页面发起请求，客户端会把请求发送给浏览器内核中的ajax引擎，ajax引擎提交请求给服务器，收到返回前客户端可以进行任意操作。服务器响应后，可以触发设置好的事件，再执行js定义好的逻辑代码。

2. 原生ajax技术

js原生Ajax其实就是围绕浏览器内置的引擎对象学习的，要使用js原生的Ajax完成异步操作，有以下几个步骤：
w3c文档

1. 创建ajax引擎对象 —所有的操作都是通过引擎对象

//所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
 var xmlHttp=new XMLHttpRequest();

2. 绑定监听—监听服务器是否已经返回响应数据

 xmlHttp.onreadystatechange=function()
		  {	
		  // 正常返回数据
			 if(xmlHttp.readyState==4){
			    // 从服务器的response获得数据
			    var response = xmlHttp.responseText;
			    alert(response);
			  }
		  }

3. 绑定提交地址

//想把请求发送到服务器，我们就需要使用 open() 方法和 send() 方法。
		xmlHttp.open("GET","/jsp_20191221/ajaxServlet",true);

4. 发送请求

   xmlHttp.send();

5. 接收响应数据，写在监听里
   如果是post提交，在发送请求前设置一个头

如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

3. juery的Ajax技术

jquery对原生的ajax进行了封装，封装后的ajax的操作方法更简洁，功能更强大。常用的有3种

1) jQuery.get(url, [data], [callback], [type])

url,[data],[callback],[type]String,Map,Function,StringV1.0url:待载入页面的URL地址

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

type:返回内容格式，xml, html, script, json, text, _default。

2) jQuery.post(url, [data], [callback], [type])

3）jQuery.ajax(url,[settings])

回调函数

如果要处理$.ajax()得到的数据，则需要使用回调函数。beforeSend、error、dataFilter、success、complete。

• beforeSend 在发送请求之前调用，并且传入一个XMLHttpRequest作为参数。

• error 在请求出错时调用。传入XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象（如果有的话）

• dataFilter 在请求成功之后调用。传入返回的数据以及"dataType"参数的值。并且必须返回新的数据（可能是处理过的）传递给success回调函数。

• success 当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。

• complete 当请求完成之后调用这个函数，无论成功或失败。传入XMLHttpRequest对象，以及一个包含成功或错误代码的字符串。

参数
url:请求服务器地址，一个用来包含发送请求的URL字符串。

settings:AJAX 请求设置。所有选项都是可选的。

settings:
async Boolean(默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

beforeSend(XHR) Function：发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。这是一个 Ajax 事件。如果返回false可以取消本次ajax请求。

cache Boolean:(默认: true,dataType为script和jsonp时默认为false) jQuery 1.2 新功能，设置为 false 将不缓存此页面。

complete(XHR, TS) Function:请求完成后回调函数 (请求成功或失败之后均调用)。参数： XMLHttpRequest 对象和一个描述成功请求类型的字符串。 Ajax 事件。

function (XMLHttpRequest, textStatus) {
    this; // 调用本次AJAX请求时传递的options参数
}

contents Map:一个以"{字符串:正则表达式}"配对的对象，用来确定jQuery将如何解析响应，给定其内容类型。

contentType String:(默认: “application/x-www-form-urlencoded”) 发送信息至服务器时内容编码类型。默认值适合大多数情况。如果你明确地传递了一个content-type给 $.ajax() 那么他必定会发送给服务器（即使没有数据要发送）

contextObject:这个对象用于设置Ajax相关回调函数的上下文。也就是说，让回调函数内this指向这个对象（如果不设定这个参数，那么this就指向调用本次AJAX请求时传递的options参数）。比如指定一个DOM元素作为context参数，这样就设置了success回调函数的上下文为这个DOM元素。就像这样：

$.ajax({ url: "test.html", context: document.body, success: function(){
    $(this).addClass("done");
}});

converters map:默认： {"* text": window.String, “text html”: true, “text json”: jQuery.parseJSON, “text xml”: jQuery.parseXML}

一个数据类型对数据类型转换器的对象。每个转换器的值是一个函数，返回响应的转化值

crossDomain mapV1.5默认： 同域请求为false

跨域请求为true如果你想强制跨域请求（如JSONP形式）同一域，设置crossDomain为true。这使得例如，服务器端重定向到另一个域

data Object,String:发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:[“bar1”, “bar2”]} 转换为 “&foo=bar1&foo=bar2”。

dataFilter Function:给Ajax返回的原始数据的进行预处理的函数。提供data和type两个参数：data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。

function (data, type) {
    // 对Ajax返回的原始数据进行预处理
    return data  // 返回处理后的数据
}

dataType String:
预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如XML MIME类型就被识别为XML。在1.4中，JSON就会生成一个JavaScript对象，而script则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:

“xml”: 返回 XML 文档，可用 jQuery 处理。

“html”: 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。

“script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。’’‘注意：’’'在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)

“json”: 返回 JSON 数据 。

“jsonp”: JSONP 格式。使用 JSONP 形式调用函数时，如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。

“text”: 返回纯文本字符串

error Function:(默认: 自动判断 (xml 或 html)) 请求失败时调用此函数。有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。如果发生了错误，错误信息（第二个参数）除了得到null之外，还可能是"timeout", “error”, “notmodified” 和 “parsererror”。Ajax 事件。

function (XMLHttpRequest, textStatus, errorThrown) {
    // 通常 textStatus 和 errorThrown 之中
    // 只有一个会包含信息
    this; // 调用本次AJAX请求时传递的options参数
}

timeout Number:设置请求超时时间（毫秒）。此设置将覆盖全局设置。

type String(默认: “GET”) 请求方式 (“POST” 或 “GET”)， 默认为 “GET”。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。

url String(默认: 当前页地址) 发送请求的地址。

success(data, textStatus, jqXHR) Function,Array:
请求成功后的回调函数。参数：由服务器返回，并根据dataType参数进行处理后的数据；描述状态的字符串。还有 jqXHR（在jQuery
1.4.x的中，XMLHttpRequest） 对象 。在jQuery 1.5， 成功设置可以接受一个函数数组。每个函数将被依次调用。 Ajax 事件。

function (data, textStatus) {
    // data 可能是 xmlDoc, jsonObj, html, text, 等等...
    this; // 调用本次AJAX请求时传递的options参数
}