Ajax和jQuery的ajax方法

Ajax

• Asynchronous Javascript And XML（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术
• AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
• AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
• AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

XMLHttpRequest

XMLHttpRequest 是 AJAX 的基础
- open(method,url,async)
规定请求的类型、URL 以及是否异步处理请求。
- method：请求的类型；GET 或 POST
- url：文件在服务器上的位置
- async：true（异步）或 false（同步）
- setRequestHeader(header,value)
向请求添加 HTTP 头。
- header: 规定头的名称
- value: 规定头的值
- send(string)
string：仅用于 POST 请求

xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();

xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

responseText 获得字符串形式的响应数据。

responseXML 获得 XML 形式的响应数据。

onreadystatechange 事件

• onreadystatechange
  存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
• readyState
  存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
  0: 请求未初始化
  1: 服务器连接已建立
  2: 请求已接收
  3: 请求处理中
  4: 请求已完成，且响应已就绪
• status
  200: “OK”
  404: 未找到页面

jQuery ajax

jQuery 提供多个与 AJAX 有关的方法。

编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。

• load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
  $(selector).load(URL,data,callback);
  
  • URL (必需的） 参数规定您希望加载的 URL。
  • data (可选的) 参数规定与请求一同发送的查询字符串键/值对集合。
  • callback (可选的) 参数是 load() 方法完成后所执行的函数名称。
• get() 从指定的资源请求数据
  
  • $.get(URL,callback);
  • URL (必需的) 参数规定您希望请求的 URL。
  • callback (可选的) 参数是请求成功后所执行的函数名。
    
    • 第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。
• post() 向指定的资源提交要处理的数据 POST 方法不会缓存数据
  
  • $.post(URL,data,callback);
  • URL (必需的 参数规定您希望请求的 URL。
  • data (可选的) 参数规定连同请求发送的数据。
  • callback (可选的) 参数是请求成功后所执行的函数名。
    
    • 第一个回调参数存有被请求页面的内容，而第二个参数存有请求的状态。
• getJSON()
  异步加载JSON格式数据
  
  • $.getJSON(url,[data],[callback])
• getScript()
  异步加载并执行js文件
  
  • $.getScript(url,[callback])
• ajax()
  
  • 最底层、功能最强大的请求服务器数据的方法
  • $.ajax([settings])
    
    • 参数settings 为发送ajax请求时的配置对象，在该对象中:
    • url表示服务器请求的路径，
    • data为请求时传递的数据，
    • dataType为服务器返回的数据类型，
    • success为请求成功的执行的回调函数，
    • type为发送数据请求的方式，默认为get。

• ajaxSetup()

  设置全局Ajax默认选项,使用ajaxSetup()方法可以设置Ajax请求的一些全局性选项值，设置完成后，后面的Ajax请求将不需要再添加这些选项值

  • $.ajaxSetup([options])
    

    $.ajaxSetup({
        type:"POST",
        dataType:"json",
        success:function(data){
            console.log(data);
        }
    });
    $.ajax({
        url: "/book/list",
     });

• ajaxStart()和ajaxStop()
  ajaxStart()和ajaxStop()方法是绑定Ajax事件。ajaxStart()方法用于在Ajax请求发出前触发函数，ajaxStop()方法用于在Ajax请求完成后触发函数。
  
  • $(selector).ajaxStart(function())和$(selector).ajaxStop(function())