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服务器上获取静态的数据文件。如果要向服务器传递参数,可以使用.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 ] )
除了对服务器的状态和应用的模型数据的影响,
.post()还有以下区别:
GET请求会将参数跟在url后进行传递,POST请求则作为HTTP消息的实体内容发送给Web服务器。在ajax中这种区别对用户是不可见的。
GET对传输的数据大小有限制(通常不大于2kb),使用POST方式传递的数据量比GET大得多(理论上不受限制)
GET方式请求的数据会被浏览器缓存,这种情况可能带来安全问题。
.post()的结构和使用方式都相同。

四、$.getScript()
$.getScript()用来加载.js文件,与加载一个HTML片段一样,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

你可能感兴趣的:(ajax总结)