jQuery中ajax学习记录

　　不得不说，jQuery真的是一个特别好用的轻量级JS框架，帮助我们轻松方便的实现一些应用，在一定程度上减少代码量，改变我们编写JavaScript的习惯．昨天巩固了一下jQuery.ajax()，所以来做个笔记，进行总结一下．

1. load(url,[data],[]callback)

载入远程的HTML文件代码并且插入到DOM中．

• url(string):请求的HTML页面的URL地址
• data(Map):发送到服务器的key/value数据
• callback(Callback):请求完成时的回调函数

这个方法默认使用GET方式来传递的，如果［data］参数有传递数据进去，就会自动转换为ＰＯＳＴ方式．
这个方法可以动态加载一些文件，从远程获取一些数据

  $("input[type=button]").click(function () {
                /*发送的参数形式必须是Json格式*/
     　　 let send = {"username":$("#username").val
      }
                          　　　　　　　　　$("div").load("propcess.php",send,function(data){
              alert(data);
     })
 })

此段代码就是当我们点击button按钮的时候，就会在div元素中加载propcess.php文件，send是要请求的数据，function是一个回调函数．

注意：

     １．添加**+Math.random**是为了适应各种浏览器下，比如IE浏览器的缓存特别严重，添上它之后会避免此项问题，在我们改动数据后，会及时加载改动数据．
     ２． 所有ajax请求必须在服务器下完成．我的是127.0.0.1+*地址．  

　　　　　３．［data］一般用json格式，这样比较方便获取．

    function (responseText, textStatus, XMLHttpRequest){
    this;//在这里this指向的是当前的DOM对象
    //alert(responseText);//请求返回的内容
    //alert(textStatus);//请求状态：success，error
    //alert(XMLHttpRequest);//XMLHttpRequest对象
    });

2.jQuery.get(url,[data],[callback],[dataType])

使用GET方式来进行异步请求(POST请求和GET类似)

参数解析

• url(String):发送请求的URL地址．
• data(map):要发送给服务器的数据，以key/value的键值对形式表示，会做为jQueryString附加到请求URL中．
• callback(Function):　载入成功回调函数（只有Response的返回是success时才调用该方法）．
• dataType(string):客户端请求的数据类型(JSON,XML.ect)

 $("input[type=button]").click(function () {
      /*$.get(url, senddata, Callback, datatype){}*/
    $.get("text?data="+Math.random(),function (data) 　　　　　　　　{
                    $(".load").html(data);
                })
  })

上段代码展示的是用GET请求text文件里的数据，然后将请求到的数据动态加载到l类名为.load的DIV中．

３.jQuery.post(url,[data],[callback],[dataType])

(post和get类似，所以就不详细记录了)．

４.jquery.getScript(url,[callback])

通过GET方式请求载入并执行一个JS文件．
参数解析
- url (String) : 待载入 JS 文件地址。
- callback (Function) : (可选) 成功载入后回调函数。
1.2 版本之前，getScript只能调用同域js文件，1.2中我们可以跨域调用．注意：Safari2或者更早的版本不能在全局作用域中同步执行脚本．如果通过getScript加入脚本，需要加入延时函数．
此方法可以用在当编辑器只有focus()的时候才去加载编辑器需要的js文件．
加载并执行AjaxEvent.js

$.getScript("AjaxEvent.js", function(){
　　　　alert("AjaxEvent.js 加载完成并执行完成.你再点击上面的Get或Post按钮看看有什么不同？");
});

５.jQuery　Ajax事件

其实无论是.get還是.post请求，最底层都是通过ajax完成的．
Ajax请求会产生若干不同的时间，我们可以订阅这些事件并在其中处理我们的逻辑．在jQuery有局部和全局事件两种．

局部事件：每次在ajax请求时在方法内定义的．

 $.ajax({
            beforeSend: function(){
            // Handle the beforeSend event
            },
            complete: function(){
            // Handle the complete event
            }
            // ...
});

全局事件：每次的ajax请求都会触发，它会像DOM中的所有元素广播，上面的getScript()实例中加载脚本就是全局Ajax事件．

$("#loading").bind("ajaxSend", function(){
        $(this).show();
        }).bind("ajaxComplete", function(){
        $(this).hide();
});
或者：
 $("#loading").ajaxStart(function(){
        $(this).show();
});

我们一般用的都是局部事件，当然用全局的时候，想要将全局事件禁用，只需要设置gobal选项false就行：

 $.ajax({
        url: "test.html",
        global: false,// 禁用全局Ajax事件.
        // ...
});

代码示例：

$("input[type=button]").click(function () {
   let url = "propcess.php";
   let sendData = {"username": $("#username").val()}
   $.ajax({
         url: url,
       　type: "post",
         data: sendData,
         success: function () {
              if (data === "true") {
                 $("div").html("用户名可以使用");
               } else {
                 $("div").html("用户名不可使用");
                    }
           　　}
         })
  })

６.jquery.ajax(options)

通过http请求加载远程数据．
$.ajax()返回其创建的XMLHttorequest对象．大多数情况下，无需操作该对象，但特殊情况下可以手动终止请求．
注意：

• 当设置datatype类型为＂script＂的时候，所有远程post请求都会转化为GET方式．
• 1.2版本中，可以跨域加载JSON数据，使用时将数据类型设置为JSONP．
• 常用的ajax参数
  　
  　 url，type，timeout，async，cache（设为false时，不会从浏览器缓存中加载请求信息），complete（请求完成后回调函数），contentType（发送信息至服务器时内容编码类型），beforeSend ，success ，complete ，error（后面会详细记录.）

７．ajax中的error

在ajax请求不到信息时，我们肯定要给客户返回一个错误信息．所以我们就要处理抛出的错误．

function (XMLHttpRequest, textStatus, errorThrown) {
     // 通常情况下textStatus和errorThown只有其中一个有值 
      this; // the options for this ajax request
 }

实例代码：

$("input").click(function () {
    $.ajax({
          url: "example4.php?" + Math.random(),
          type: "get",
          timeout: 1000,//请求时间
          success: function (data) {
         　　　　　　 $("div").html(data);
         　　　　 },
          error: function (jqXHR, textStatus, errorThrow) {
/* alert("textStatus:"+textStatus);
　 alert("errorThrow:"+errorThrow)*/
       if (errorThrow === "Not Found") {
           $("span").html("你请求的地址不存在");
      }
       if (textStatus === timeout) {
           $("span").html("请求超时，请重新刷新页面")
              }
            }
      }
});
      $(document).ajaxError(function () {
                $("span").html("ajax请求发生错误");
});//全局代码

其他整理

serialize()与serializeArray()

serialize():序列表格内容为字符串．
serializeArray():序列化表格元素（返回JSON数据结构数据）
代码实例

 $("input[type=button]").click(function () {
    let data = $("form").serialize();//获取表单数据，只能在form标签上用
     alert(data);
     $.ajax({
            url: "example3.php?" + Math.random(),
            type: "post",
            data: data,
            success: function (data) {
                    //.....
                    }
                })
            })

运行结果

也就是讲，可以将表单或者表格中的数据以JSON格式提取出来．

eval()方法

 　　let a = '[1,2,3,4]';
    alert(typeof(a));//string类型

    let b=eval(a);//将字符串解析成一个js代码
    alert(b[0]);

    let c='alert("hello")';
    alert(eval(c))//运行结果hello

用此方法来处理字符串，将其转化成数组形式，在解析ajax数据信息的时候非常有用．

---

就先到这，后续再进行补充．