继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

Ajax入门及其结构分析

请叫我少先队员
关注TA
已关注
手记 2
粉丝 16
获赞 180

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);
});

打开App,阅读手记
22人推荐
发表评论
随时随地看视频慕课网APP