jQuery（五）AJAX、AJAX回顾总结、load() 、GET 和 POST 方法的区别

jQuery（五）AJAX、AJAX回顾总结、load() 、GET 和 POST 方法的区别

总结：

• load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

  • 可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
    • responseTxt - 包含调用成功时的结果内容
    • statusTXT - 包含调用的状态
    • xhr - 包含 XMLHttpRequest 对象

• GET - 从指定的资源请求数据 ，GET 方法可能返回缓存数据。

• POST - 向指定的资源提交要处理的数据，不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

• HTTP 方法 - GET 对比 POST。

1. AJAX回顾

• AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

• AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

• 与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

  然而，在以下情况中，请使用 POST 请求：

  • 无法使用缓存文件（更新服务器上的文件或数据库）
  • 向服务器发送大量数据（POST 没有数据量限制）
  • 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

回忆：

• 浏览器与服务器之间，采用 HTTP 协议通信。用户在浏览器地址栏键入一个网址，或者通过网页表单向服务器提交内容，这时浏览器就会向服务器发出 HTTP 请求。

• 1999年，微软公司发布 IE 浏览器5.0版，第一次引入新功能：允许 JavaScript 脚本向服务器发起 HTTP 请求。这个功能当时并没有引起注意，直到2004年 Gmail 发布和2005年 Google Map 发布，才引起广泛重视。2005年2月，==AJAX 这个词第一次正式提出，它是 Asynchronous JavaScript and XML 的缩写，指的是通过 JavaScript 的异步通信，从服务器获取 XML 文档从中提取数据，再更新当前网页的对应部分，而不用刷新整个网页。后来，AJAX 这个词就成为 JavaScript 脚本发起 HTTP 通信的代名词，也就是说，只要用脚本发起通信，就可以叫做 AJAX 通信。==W3C 也在2006年发布了它的国际标准。

• 具体来说，AJAX 包括以下几个步骤。

  1. 创建 XMLHttpRequest 实例
  2. 发出 HTTP 请求
  3. 接收服务器传回的数据
  4. 更新网页数据

• 概括起来，就是一句话，AJAX 通过原生的XMLHttpRequest对象发出 HTTP 请求，得到服务器返回的数据后，再进行处理。现在，服务器返回的都是 JSON 格式的数据，XML 格式已经过时了，但是 AJAX 这个名字已经成了一个通用名词，字面含义已经消失了。

• XMLHttpRequest对象是 AJAX 的主要接口，用于浏览器与服务器之间的通信。尽管名字里面有XML和Http，它实际上可以使用多种协议（比如file或ftp），发送任何格式的数据（包括字符串和二进制）。

• 详细流程

  • XMLHttpRequest本身是一个构造函数，可以使用new命令生成实例。它没有任何参数。

    var xhr = new XMLHttpRequest();
    

    一旦新建实例，就可以使用open()方法指定建立 HTTP 连接的一些细节。

    xhr.open('GET', 'http://www.example.com/page.php', true);
    

    上面代码指定使用 GET 方法，跟指定的服务器网址建立连接。第三个参数true，表示请求是异步的。

  • 然后，指定回调函数，监听通信状态（readyState属性）的变化。

  • xhr.onreadystatechange = handleStateChange;
    
    function handleStateChange() {
           
      // ...
    }
    

    上面代码中，一旦XMLHttpRequest实例的状态发生变化，就会调用监听函数handleStateChange

  • 最后使用send()方法，实际发出请求。

    xhr.send(null);
    

    上面代码中，send()的参数为null，表示发送请求的时候，不带有数据体。如果发送的是 POST 请求，这里就需要指定数据体。

  • 一旦拿到服务器返回的数据，AJAX 不会刷新整个网页，而是只更新网页里面的相关部分，从而不打断用户正在做的事情。

</