jQuery与Ajax的应用

一，Ajax的优势
　　1，不需要插件的支持
　　2，优秀的用户体验
　　3，提高web程序的性能
　　4，减轻服务器和带宽的负担
二，Ajax的不足
　　1，浏览器对XMLHttpRequest对象的支持度不足
　　2，破坏浏览器前进，后退按钮
　　3，对搜索引擎的支持不足
　　4，开发和调试工具缺乏
三，Ajax的XMLHttpRequest对象

　　function createXHR(){
　　　　if(typeof XMLHttpRequest != "undefined"){
　　　　　　return new XMLHttpRequest();
　　　　}else if(typeof ActiveXObject != "undefined"){
　　　　　　if(typeof argument.callee.activeXString != "string"){
　　　　　　　　var versions = ["MSXML.XMLHttp.6.0","MSXML.XMLHttp.3.0","MSXML.XMLHttp"],i,len;
　　　　　　　　for(i=0,len=versions.length;i<len;i++){
　　　　　　　　　　try{
　　　　　　　　　　　　new ActiveXObject(versions[i]);
　　　　　　　　　　　　argument.callee.activeXString = versions[i];
　　　　　　　　　　}catch(ex){//跳过}
　　　　　　　　}
　　　　　　}
　　　　　　return new ActiveXObject(argument.callee.activeXString);
　　　　}else{
　　　　　　throw new Error("No XHR object available");
　　　　}
　　}

四，load()方法
　　1，载入html文档
　　load(url [,data] [,callback])
　　url:请求页面的URL地址，string类型
　　data，发送至服务器的key/value数据，object类型
　　callback，请求完成时的回调函数，不关请求失败，function类型
　　2，筛选载入的html文档
　　url参数后面接选择符，如load("test.html .class")
　　3，传递方式
　　data参数，没有给定则为get请求方式，data参数给定就是post请求方式
　　4，回调参数
　　回调函数中包含三个参数，responseText，textStatus，XMLHttpRequest
五，$.get()方法和$.post()方法
　　1，$.get()方法，$.get(url [,data] [,callback] [,type])
　　url:请求的html页面地址，为string类型
　　data,发送至服务器的key/value数据，作为queryString附加到请求URl中
　　callback，载入成功时回调函数，function类型
　　type，服务器返回内容的格式，包括xml，html，script，json，text，
　　回调函数有两个参数，data：返回的内容格式，textStatus：请求状态，success，error，notmodefied，timeout
　　返回的数据格式有
　　　　html片段，function(data,textStatus){$("").html(data)},添加到页面
　　　　XML文档，function(data,textStatus){var username = $(data).find("coment").attr("username");var txtHtml ="　　　　　　　　　　　　  　　　　　　　　　　<div>username</div>";$("").html(txtHtml);}
　　　　JSON文档，function(data,textStatus){var username = data.username;var txtHtml = "<div>username</div>";$("").html(txtHtml);}
　　2，$.post()方法
　　get请求将参数跟在URL后进行传递，而POST请求将参数作为HTTP消息的实体内容发送给服务器，在Ajax中这种区别不可见
　　get请求对传输的数据大小限制（不大于2KB），POST请求方式不受限制
　　get请求的数据会被浏览器缓存起来，较不安全，POST避免这种情况
　　get请求的数据在php中用$_GET[]获取，post请求用$_POST[]获取，两者都可以用$_REQUEST[]获取
六，$.getScript()方法和$.getJson()方法
　　1，$.getScript()方法，$.getScript("test.js"),动态加载一个外部js文件
　　也有回调函数，在js文件载入成功后调用
　　2，$.getJson()方法，$.getJson("test.json"),动态加载一个外部json文件
　　回调函数有一个data参数，一般在回调函数里处理返回的数据
　　3，$.each()方法，用来遍历data中的数据，传人两个参数（数组或对象，回调函数（对象的成员或数组的索引，对应遍历或内容））
七，$.ajax()方法
　　$.ajax(options)
　　参数表
　　url：string，发送请求的url地址
　　type：string，请求方式，默认为GET
　　timeout：Number，设置请求超时时间，覆盖$.ajax()方法的全局设置
　　data：object或string，发送到服务器的数据，GET请求中奖附加到URL后，对象为key/value格式
　　dateType：string，预期服务器返回的数据类型
　　beforeSend：function，发送请求前可以修改XMLHttpRequest对象的函数，
　　complete：function，请求完成后调用的回调函数，
　　success：function，请求成功后调用的回调函数，两个参数（服务器返回的data，textStatus）
　　error：function，请求失败时被调用的函数（XMLHttpRequest对象，错误信息，捕获的错误对象）
　　global：boolean，默认为true，表示是否触发全局Ajax对象
八，序列化元素
　　1，serialize()方法
　　作用于将DOM元素内容序列化为字符串，用于ajax请求
　　$.get("get.php",$("#form").serialize(),function(){});
　　$(":checkbox,:radio").serialize();把复选框和单选框的值序列化
　　2，serializeArray()方法
　　序列化之后返回JSON格式的数据
　　3，$.param()方法
　　对数组或对象按照key=value&key=value进行序列化
九，jQuery中的全局事件
　　加载ajax时触发ajaxStart函数，加载结束触发ajaxStop函数
　　$("#loading").ajaxStart(function(){//显示加载中});
　　$("#loading").ajaxStop(function(){//隐藏加载中});
　　全局的，只要碰触ajax请求就会触发
　　ajaxComplete(callback)，请求完成时执行
　　ajaxError(callback)，请求发生错误时执行的函数，捕捉到的错误作为最后一个参数传递
　　ajaxSend(callback)，ajax请求发送前执行的函数
　　ajaxSuccess(callback)，ajax请求成功时执行的函数
　　在global：true时才会触发全局事件

转载于:https://www.cnblogs.com/b0xiaoli/p/3678314.html