Ajax基础--Jquery中的Ajax

JQuery AJAX

$.ajax()

        $.ajax({
            type: 'get',//请求类型
            url: 'test.php',//请求网址
            data: { name: 'kemp' , age: 23 , other: val },//发给服务器的数据，也可写成data : "name=jack&age=17&other="+val ;
            dataType: 'JSONP',//默认是JSON字符串，如果需要JSONP跨域需要在dataType说明，如json / JSONP /XML
            success: function (obj/* 接收响应体的变量 */) {
                //处理函数体
            },
            error: function () { },//执行失败执行该函数

        })

几个重要属性详解：

dataType属性详解

类型：String
默认是JSON字符串，需要用 JSON.parse()进行转换
可用值:

• “json”: 返回内容当做JSON对象进行解析，解析失败就报错。
• “jsonp”: JSONP 格式。 使用 JSONP 形式调用函数时，如myurl?callback=? jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。需要跨域只需要设置成jsonp即可
• “xml”: 返回 XML 文档，可用 jQuery 处理。
• “html”: 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
• “script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 cache 参数。注意：在远程请求时(不在同一个域下) ，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）

• “text”: 返回纯文本字符串

  jsonp

  类型：String
  在一个 jsonp 请求中重写回调函数的名字。这个值用来替代在 “callback=?” 这种 GET 或 POST 请求中 URL 参数里的 “callback” 部分，比如 { jsonp: ‘onJsonPLoad’ } 会将 “onJsonPLoad=?” 传给服务器。

  success

  类型：Function
  请求成功后的回调函数。
  参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。
  响应体由函数形参接收。
  这是一个 Ajax 事件。

$.get() 和 $.post()

与$.ajax()区别仅仅是少写一个type。

$.get()

$.get({
            url: 'test.php',//请求网址
            data: { name: 'kemp' , age: 23 , other: val },//发给服务器的数据，也可以携程data : "name=jack&age=17&other="+val ;
            dataType: 'JSONP',//默认是JSON字符串，如果需要JSONP需要在dataType说明，如json / JSONP /XML
            success: function (obj/* 接收响应体的变量 */) {
                //处理函数体
            },
            error: function () { },//执行失败执行该函数
        })
        //或者$.get('url' , '参数' , success , dataType);

$.post()

与$.get()类似

拓展

.serialize()

将表单内容序列化为字符串。
必须有name属性才能行，会把name作为键,最后生成用&连接的字符串

用JQ对象调用

        //html中为 <form action="" id="fm"></form>
        $('#fm').serialize();//

$.ajaxSetup()

设置将来的 Ajax 请求的默认值。设置 AJAX 请求默认地址为 “/xmlhttp/”,用 POST 代替默认 GET 方法。其后的 AJAX 请求无需设置任何选项参数，若设置，会覆盖掉

        $.ajaxSetup({
            url: "/xmlhttp/",
            type: "POST"
        });
        $.ajax({ data: myData });

.ajaxStart(function () { })

当有 Ajax 请求开始时注册要调用的处理程序，用JQ对象调用

        $("div").ajaxStart(function(){
            $(this).html("<img src='demo_wait.gif' />");
        });//当 AJAX 请求开始时，显示“加载中”

.ajaxStop(function () { })

当所有 Ajax 请求完成时注册要调用的处理程序，用JQ对象调用

        $("div").ajaxStop(function(){
            alert("所有 AJAX 请求已完成");
        });

tips:

jQuery中的 .html() 相当于innerHTML

        $('.text').val()
        .addclass() .removeClass() .hasClass()

计时器是由window调用的，计时器中的this慎用