ajax原理总结,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服务器上获取静态的数据文件。如果要向服务器传递参数，可以使用.get()或.post()方法。

例子：

$("#show").load("xxxx.html", function (responseText, textStatus, XMLHttpRequest) {

alert(responseText);// 请求返回的内容

alert(textStatus); // 请求状态

alert(XMLHttpRequest);// XMLHttpRequest对象

});

二、$.get()

$.get(url [, data] [, callback] [, type])

上面encodeURI()是用于编码，否则中文就无法解析

json的格式非常严格，任何一个括号的不匹配或缺失都会导致页面的脚本终止运行。

三、$.post()

$. post( url, [ data ], [ success(data, textStatus, jqXHR) ], [ dataType ] )

除了对服务器的状态和应用的模型数据的影响，.get()和

.post()还有以下区别：

GET请求会将参数跟在url后进行传递，POST请求则作为HTTP消息的实体内容发送给Web服务器。在ajax中这种区别对用户是不可见的。

GET对传输的数据大小有限制(通常不大于2kb)，使用POST方式传递的数据量比GET大得多(理论上不受限制)

GET方式请求的数据会被浏览器缓存，这种情况可能带来安全问题。

.get()和.post()的结构和使用方式都相同。

四、$.getScript()

$.getScript()用来加载.js文件，与加载一个HTML片段一样，js文件会自动执行。

$(function () {

// 点击按钮加载js1.js文件

$("#send").click(function () {

$.getScript("js1.js");

})

})

相当于加载并执行一段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 += "

" + comment['username'] +

"" + comment['location'] +

"

" + comment['contentTxt'] + "";

});

$("#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