ajax总结

18.3.23
·AJAX概念简述、内部实现原理

·常用方法：load()、$.get()、$.post()、$.getScript()、$.getJson()和serialize()还有$.ajax()
·ajax() 方法、参数、回调函数、参考手册
·其他未整理

AJAX概念简述、内部实现原理

参考来源：https://blog.csdn.net/drug_/article/details/73823856

概念简述

Asynchronous Javascript And XML(异步JavaScript和XML)

AJAX并不是一种语言,而是一种创建交互网页应用的网页开发技术 AJAX是Javascript、XHTML和CSS、DOM、XML和XSTL、XMLHttpRequest 等技术的组合

1.使用XHTML+CSS来标准化呈现;
2.使用XML和XSLT进行数据交换及相关操作;
3.使用XMLHttpRequest对象与Web服务器进行异步数据通信;
4.使用Javascript操作Document Object Model(网络文档对象模型)进行动态显示及交互;
5.使用JavaScript绑定和处理所有数据

AJAX核心对象是XMLHttpRequest

二、AJAX优缺点： AJAX异步处理优点: 减轻服务器的负担,AJAX一般只从服务器获取只需要的数据 无刷新页面更新,减少用户等待的时间 更好的客户体验,可以将一些服务器的工作转移到客户端来完成,节约网络资源,提高用户体验 无平台限制 促进显示与数据想分离

AJAX异步处理的缺点: 页面中存在大量JS,给搜索引擎带来困难 AJAX干掉了Back和History功能,即对浏览器机制的破坏 存在跨域问题 只能传输及接收utf-8编码数据

三、JSON
Javascript Object Notation,是一种轻量级的数据交换格式 JSON每种语言都认识他所以用他进行各种语言的数据的转换 JSON支持多种语言 格式 {key:value,key:value,.....}对象格式 [{key:value,key:value,.....},{key:value,key:value,.....},......]数组格式 JavaScript处理： eval('('+json+')') //将某个字符串按照JS代码来执行 例： eval("x=10;y=20;document.write(x*y)")
document.write(eval("2+2"))
JSON.parse(json) //对传过来的json字符串进行解码，变成JS认识的对象 JSON.stringify(obj) //将JS中的值编译成json字符串

·常用方法：

load()、$.get()、$.post()、$.getScript()和$.getJson()还有$.ajax()
参考：https://www.cnblogs.com/xiaoxiaoyihan/p/6050854.html
https://www.cnblogs.com/LuckyWinty/p/5279032.html——使用ajaxSetup()方法设置全局Ajax默认选项、使用ajaxStart()和ajaxStop()方法
https://www.cnblogs.com/ranzige/p/4103203.html

一、load()
load(url [,data] [,callback])
url(String):服务端资源的url。
data(Obejct):发送到服务器的key/value数据
callback(Function):请求完成时(无论成功或失败)的回调函数，在响应数据已经加载到包装集元素之后被调用。传入这个函数的参数是响应文本、状态码、以及xhr实例。
load()的传递方式根据参数data来自动指定。如果没有参数，则采用GET方式传递，否则，会自动转换为POST方式。
load()可以远程载入HTML并插入到DOM中。
一定要在一个标签jquery的基础上使用，返回一定是页面。
load()常用来从web服务器上获取静态的数据文件。如果要向服务器传递参数，可以使用<nobr aria-hidden="true">.get()或</nobr>.post()方法。
例子：
<script type="text/javascript">
$(function () {
// 点击按钮，触发加载动作
$("#btn").click(function () {
// 将xxxx.html加载进id为“show”的元素里
$("#show").load("xxxx.html");
});
})
</script>
$("#show").load("xxxx.html", function (responseText, textStatus, XMLHttpRequest) {
alert(responseText);// 请求返回的内容
alert(textStatus); // 请求状态
alert(XMLHttpRequest);// XMLHttpRequest对象
});

二、$.get()
$.get(url [, data] [, callback] [, type])
<script type="text/javascript">
$(function () {
$("#send").click(function () {
// 点击按钮触发get请求
$.get("get1.jsp", {
// 向服务器传递参数，encodeURI进行完整编码
username: encodeURI($("#username").val()),
location: encodeURI($("#location").val()),
contentTxt: encodeURI($("#contentTxt").val())
}, function (data, textStatus) {
// alert(textStatus); // 返回请求状态
// alert(decodeURI(data)); // 返回请求的状态
// 将返回的数据添加到id为“resText”的元素中
$("#resText").html(decodeURI(data));
})
});
})
</script>
<script type="text/javascript">
$(function () {
$("#send").click(function () {
$.get("get2.jsp", {
username: encodeURI($("#username").val()),
location: encodeURI($("#location").val()),
contentTxt: encodeURI($("#contentTxt").val())
}, function (data, textStatus) {
alert(textStatus);
var username = data.username;
var location = data.location;
var contentTxt = data.contentTxt;
username = decodeURI(username);
location = decodeURI(location);
contentTxt = decodeURI(contentTxt);
var txtHtml = "<div class='comment'><p><a href='#' class='username'>" + username +
"</a><span class='location'>" + location +
"</span></p><p class='contentTxt'>" + contentTxt + "</p></div>";
$("#resText").html(txtHtml);// 将返回的数据添加到页面
}, "json");
})
})
</script>
上面encodeURI()是用于编码，否则中文就无法解析
json的格式非常严格，任何一个括号的不匹配或缺失都会导致页面的脚本终止运行。

三、$.post()
$. post( url, [ data ], [ success(data, textStatus, jqXHR) ], [ dataType ] )
除了对服务器的状态和应用的模型数据的影响，<nobr aria-hidden="true">.get()和</nobr>
.post()还有以下区别：
GET请求会将参数跟在url后进行传递，POST请求则作为HTTP消息的实体内容发送给Web服务器。在ajax中这种区别对用户是不可见的。
GET对传输的数据大小有限制(通常不大于2kb)，使用POST方式传递的数据量比GET大得多(理论上不受限制)
GET方式请求的数据会被浏览器缓存，这种情况可能带来安全问题。
<nobr aria-hidden="true">.get()和</nobr>.post()的结构和使用方式都相同。

四、$.getScript()
$.getScript()用来加载.js文件，与加载一个HTML片段一样，js文件会自动执行。
<pre><script type="text/javascript"></pre>
<pre> $(function () {</pre>
<pre> // 点击按钮加载js1.js文件</pre>
<pre> $("#send").click(function () {</pre>
<pre> $.getScript("js1.js");</pre>
<pre> })</pre>
<pre> })</pre>
<pre></script></pre>
相当于加载并执行一段js。

五、.getJSON()
.getJSON()用于加载JSON文件，用法与.getScript()相同。
json数据：
[
{
"username": "张三",
"location": "[北京市网友]",
"contentTxt": "一楼献度娘"
},
{
"username": "李四",
"location": "[山东省济南市网友]",
"contentTxt": "没抢到沙发"
},
{
"username": "王五",
"location": "[河南省郑州市网友]",
"contentTxt": "顶顶顶顶顶"
}
]
$(function () {
$("#send").click(function () {
$.getJSON("demo.json", function (data) {
$("#resText").empty();
var html = '';
$.each(data, function (index, comment) {
html += "<div class='comment'><a href='#' class='username'>" + comment['username'] +
"</a><span class='location'>" + comment['location'] +
"</span></p><p class='contentTxt'>" + comment['contentTxt'] + "</p></div>";
});
$("#resText").html(html);
});
})
});

六、serialize()
使用serialize()方法可以将表单中有name属性的元素值进行序列化，生成标准URL编码文本字符串，直接可用于ajax请求，它的调用格式如下：
$(selector).serialize()
其中selector参数是一个或多个表单中的元素或表单元素本身。

七、$.ajax()方法
详见http://www.w3school.com.cn/jquery/ajax_ajax.asp
$.ajax()是jquery最底层的实现。
$.ajax(options)
async类型：Boolean默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。
contentType类型：String默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。
默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器（即使没有数据要发送）。
context类型：Object
这个对象用于设置 Ajax 相关回调函数的上下文。也就是说，让回调函数内 this 指向这个对象（如果不设定这个参数，那么 this 就指向调用本次 AJAX 请求时传递的 options 参数）。比如指定一个 DOM 元素作为 context 参数，这样就设置了 success 回调函数的上下文为这个 DOM 元素。
就像这样：
$.ajax({ url: "test.html", context: document.body, success: function(){
$(this).addClass("done");
}});
data类型：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 进一步处理
————————————————————
还有好多呢。
还有jQuery.Form plugin Ajax
ajaxForm
ajaxSubmit
Ajax在MVC中的使用
Ajax.BeginForm
Ajax.ActionLink
jquery.form与jquery.validate结合使用
参考http://www.jb51.net/article/85694.htm
jQuery AJAX方法 前台往后台传数据
http://blog.csdn.net/dreamstar613/article/details/61912717
jQuery AJAX 方法 success()后台传来的4种数据
http://blog.csdn.net/dreamstar613/article/details/61913970
前台页面先对中文进行编码，如下红色字体：
https://www.cnblogs.com/dscs/p/5740425.html