Ajax入门及其结构分析

Ajax入门及其分析

一、Ajax介绍：
1、AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
2、AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。
3、AJAX 是一种用于创建快速动态网页的技术。
4、通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
二、Ajax的异步请求和同步请求：
1、异步请求
异步: 请求通过事件触发->服务器处理（这是浏览器仍然可以作其他事情）->处理完毕
2、同步请求
同步：提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事
三、Ajax请求有以下几种：
1、$.ajax请求
Datatype类型：
(1)、"xml": 返回 XML 文档，可用 jQuery 处理。
(2)、"html": 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。
(3)、"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。注意：在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
(4)、"json": 返回 JSON 数据 。
(5)、"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
(6)、"text": 返回纯文本字符串。
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});

2、$.post请求
参数：
url:发送请求地址。
data:待发送 Key/value 参数。
callback:发送成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default。
$.post("test.php", { "func": "getNameAndTime" },
function(data){
alert(data.name); // John
console.log(data.time); // 2pm在控制台输出内容
}, "json");
3、$.get请求
参数：
url:待载入页面的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default。
$.get("test.cgi", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});