本文为转载，作者初发表于博客园

以下是正文。

同步和异步

同步和异步的概念

  • 同步：必须等待前面的任务完成，才能继续后面的任务。
  • 异步：不受当前任务的影响。

拿排队举例：

  • 同步：在银行排队时，只有等到你了，才能够去处理业务。
  • 异步：在排队的时候，可以玩手机。

异步更新网站

我们在访问一个普通的网站时，当浏览器加载完HTML、CSS、JS以后，网站的内容就固定了。如果想让网站内容发生更改，就必须刷新页面才能够看到更新的内容。

可如果用到异步更新，情况就大为改观了。比如，我们在访问新浪微博时，看到一大半了，点击底部的加载更多，会自动帮我们加载更多的微博，同时页面并没有刷新。

试想一下，如果没有异步刷新的话，每次点击“加载更多”，网页都要刷新，体验就太不好了。

web前端里的异步更新，就要用到 Ajax。

Ajax

Ajax 的概念

在浏览器中，我们可以在不刷新页面的情况下，通过ajax的方式去获取一些新的内容。

Ajax：Asynchronous Javascript And XML（异步 JavaScript 和 XML）。它并不是凭空出现的新技术，而是对于现有技术的结合。Ajax 的核心是 js 对象：XMLHttpRequest。

发送 Ajax 请求的五个步骤

其实也就是 使用 XMLHttpRequest 对象的五个步骤。

我们先回忆一下，一个完整的HTTP请求需要的是：

  • 请求的网址、请求方法get/post。
  • 提交请求的内容数据、请求主体等。
  • 接收响应回来的内容。

发送 Ajax 请求的五个步骤：

（1）创建异步对象。即 XMLHttpRequest 对象。

（2）使用open方法设置请求的参数。open(method, url, async)。参数解释：请求的方法、请求的url、是否异步。

（3）发送请求。

（4）注册事件。 注册onreadystatechange事件，状态改变时就会调用。

如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。

（5）获取返回的数据。

Ajax 请求：get 请求举例

（1）index.html：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>Document</title>
  6.     </head>
  7.     <body>
  8.         <h1>Ajax 发送 get 请求</h1>
  9.         <input type="button" value="发送get_ajax请求" id='btnAjax'>
  10.         <script type="text/javascript">
  11.             // 绑定点击事件
  12.             document.querySelector('#btnAjax').onclick = function() {
  13.                 // 发送ajax 请求 需要 五步
  14.                 // （1）创建异步对象
  15.                 var ajaxObj = new XMLHttpRequest();
  16.                 // （2）设置请求的参数。包括：请求的方法、请求的url。
  17.                 ajaxObj.open('get', 'http://127.0.0.1:8848/JQuery/ajax.txt');
  18.                 // （3）发送请求
  19.                 ajaxObj.send();
  20.                 //（4）注册事件。 onreadystatechange事件，状态改变时就会调用。
  21.                 //如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。
  22.                 ajaxObj.onreadystatechange = function() {
  23.                     // 为了保证 数据 完整返回，我们一般会判断 两个值
  24.                     if (ajaxObj.readyState == 4 && ajaxObj.status == 200) {
  25.                         // 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
  26.                         // 5.在注册的事件中 获取 返回的 内容 并修改页面的显示
  27.                         console.log('数据返回成功');
  28.                         console.log(ajaxObj);
  29.                         // 数据是保存在 异步对象的 属性中
  30.                         console.log(ajaxObj.responseText);
  31.                         // 修改页面的显示
  32.                         document.querySelector('h1').innerHTML = ajaxObj.responseText;
  33.                     }
  34.                 }
  35.             }
  36.         </script>
  37.     </body>
  38. </html>

（2）ajax.txt：

  1. smyhvae

效果如下：

02-Ajax入门和发送http请求 - 图1

Ajax 请求：post 请求举例

index.html：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8. <h1>Ajax 发送 get 请求</h1>
  9. <input type="button" value="发送put_ajax请求" id='btnAjax'>
  10. <script type="text/javascript">
  12.     // 异步对象
  13.     var xhr = new XMLHttpRequest();
  15.     // 设置属性
  16.     xhr.open('post', '02.post.php');
  18.     // 如果想要使用post提交数据,必须添加此行
  19.     xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  21.     // 将数据通过send方法传递
  22.     xhr.send('name=fox&age=18');
  24.     // 发送并接受返回值
  25.     xhr.onreadystatechange = function () {
  26.         // 这步为判断服务器是否正确响应
  27.         if (xhr.readyState == 4 && xhr.status == 200) {
  28.             alert(xhr.responseText);
  29.         }
  30.     };
  31. </script>
  32. </body>
  33. </html>

XMLHttpRequest 对象详解

我们在上一段讲解了使用 XMLHttpRequest 对象的五个步骤。本段，我们讲一下注意事项。

发送请求

发送请求的方法：

  1. open(method, url, async);

参数解释：

  • method：请求的类型；GET 或 POST
  • url：文件在服务器上的位置
  • async：true（异步）或 false（同步）

另外还有个方法：（仅用于 POST 请求）

  1.     send(string);

POST请求时注意

如果想让 像form 表单提交数据那样使用POST请求，就需要使用 XMLHttpRequest 对象的 setRequestHeader()方法 来添加 HTTP 头。然后在 send() 方法中添加想要发送的数据：

  1.     xmlhttp.open("POST","ajax_test.php", true);
  3.     xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  5.     xmlhttp.send("name=smyhvae&age=27");

onreadystatechange 事件

注册 onreadystatechange 事件后，每当 readyState 属性改变时，就会调用 onreadystatechange 函数。

readyState：（存有 XMLHttpRequest 的状态。从 0 到 4 发生变化）

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成，且响应已就绪

status：

  • 200: “OK”。
  • 404: 未找到页面。

在 onreadystatechange 事件中，当 readyState 等于 4，且状态码为200时，表示响应已就绪。

服务器响应的内容

  • responseText：获得字符串形式的响应数据。
  • responseXML：获得 XML 形式的响应数据。

如果响应的是普通字符串，就使用responseText；如果响应的是XML，使用responseXML。

Ajax 传输 XML

XML 语法

XML（Extensible Markup Language）：可扩展标记语言。详细语法可以查看：#。

1、XML声明：

  1. <?xml version="1.0" encoding="UTF-8"?>

第一行的声明，指定了XML版本(1.0)以及使用的编码。

2、自定义标签：

XML中没有默认的标签，所有的标签都是我们自己已定义的。例如：

  1. <fox></fox>
  2. <name></name>

XML中没有单标签，都是双标签。

3、根节点：

XML中必须要有一个根节点，所有的子节点都放置在根节点下。例如：

  1. <root1>
  2.   <name></name>
  3. </root1>

XML 解析

因为 XML 就是标签，所以我们可以直接用解析Dom元素的方法解析 XML。

解析过程：

（1）html 部分：（包含 xml ）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6. </head>
  7. <body>
  8.   <person id='personXML'>
  9.       <name>fox</name>
  10.       <age>18</age>
  11.       <skill>小花花</skill>
  12.   </person>
  13. </body>
  14. </html>

（2）解析 xml：

  1. <script type="text/javascript">
  2.     var xmlObj = document.getElementById("personXML");
  3.     var name = xmlObj.getElementsByTagName('name')[0].innerHTML;
  5.     console.log(name);
  6. </script>

ajax 请求解析xml（举例）

（1）get_xml.php：（里面包含了xml文件）

  1. <?php
  2.     // 设置 返回的为 xml
  3.     header('content-type:text/xml; charset= utf-8');
  5.     // 读取xml文件 并返回
  6.     echo file_get_contents('info/star.xml');
  8.  ?>

上方代码解释：

  • php 自带了 读取 xml 文件的方法。
  • 在 php 中，如果要使用xml传输数据，则需要使用header()设置返回的内容为xml。

（2）get_xml.html：（Ajax 请求，获取并解析xml）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <input type="button"  value="获取XMl数据" id='getXML'>
  9. </body>
  10. </html>
  11. <script type="text/javascript">
  12.     document.querySelector('#getXML').onclick = function () {
  13.         var ajax = new XMLHttpRequest();
  15.         ajax.open('get','get_XMl.php');
  17.         ajax.send();
  19.         ajax.onreadystatechange = function () {
  20.             if (ajax.readyState == 4 && ajax.status==200) {
  21.                 // 如果 返回的是 xml文件
  22.                 console.log(ajax.responseText);
  24.                 // 异步 对象中 有另外一个属性 用来专门获取 xml
  25.                 // xml对象 在浏览器段 就是一个 document对象
  26.                 // 解析时 可以直接使用 querySelector 或者 getElementById等等 document对象 有的语法
  27.                 console.log(ajax.responseXML);
  28.                 console.log(ajax.responseXML.querySelector('kuzi').innerHTML);
  29.                 // 下面这个 页面文档对象 如果要获取某个标签
  30.                 console.log(window.document);
  32.             }
  33.         }
  34.     }
  35. </script>

Ajax 传输 JSON

JSON 的语法

JSON(JavaScript Object Notation)：是ECMAScript的子集。作用是进行数据的交换。语法更为简洁，网络传输、机器解析都更为迅速。

语法规则：

  • 数据在键值对中
  • 数据由逗号分隔
  • 花括号保存对象
  • 方括号保存数组

数据类型：

  • 数字（整数或浮点数）
  • 字符串（在双引号中）
  • 逻辑值（true 或 false）
  • 数组（在方括号中）
  • 对象（在花括号中）
  • null

示例：

  1. // 对象
  2. {
  3.   "name":"fox",
  4.   "age":"18",
  5.   "sex":"true",
  6.   "car":null
  7. }
  9. // 数组
  10. [
  11.   {
  12.       "name":"小小胡",
  13.       "age":"1"
  14.   },
  15.   {
  16.       "name":"小二胡",
  17.       "age":"2"
  18.   }
  19. ]

JavaScript中：json 字符串 <—> js 对象

基本上，所有的语言都有将 json 字符串转化为该语言对象的语法。

比如在 js中：

  • JSON.parse()：将JSON字符串转化为 js 对象。例如：
  1.     // 将 JSON 字符串格式化为 js 对象
  2.     var jsObj = JSON.parse(ajax.responseText);
  • JSON.stringify()：将 JS 对象转化为JSON字符串。例如：
  1.     var Obj = {
  2.       name: "fox",
  3.       age: 18,
  4.       skill: "撩妹"
  5.     };
  7.     console.log(Obj);
  9.     // 将 js 对象格式化为 JSON 字符串
  10.     var jsonStr = JSON.stringify(Obj);

PHP中：json 字符串 <—> js 对象

  • json_decode()方法：将json字符串转化为变量。
  • json_encode()方法：将变量转化为json字符串。

代码举例：

  1. <?php
  2.     header("Content-Type:text/html;charset=utf-8");
  3.     // json字符串
  4.     $jsonStr = '{"name":"itcast","age":54,"skill":"歌神"}';
  5.     // 字符串转化为 php对象
  6.       print_r(json_decode($jsonStr));
  8.       echo "<br>";
  9.       // php数组
  10.       $arrayName = array('name' =>'littleFox' ,'age' => 13 );
  11.       // php对象 转化为 json字符串
  12.       print_r(json_encode($arrayName));
  13.  ?>

输出结果：

  1.     stdClass Object ( [name] => itcast [age] => 54 [skill] => 歌神 )
  2.     {"name":"littleFox","age":13}

ajax 请求解析 json（举例）

（1）Person.json:

  1. {
  2.     "name":"小强",
  3.     "skill":"砍树",
  4.     "friend":"老板"
  5. }

（2）myJson.php：

  1. <?php
  3.     // 读取json文件 并返回即可
  4.     echo  file_get_contents('info/Person.json');
  6.  ?>

（3）getJson.html：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <h1>获取 json 数据</h1>
  9.     <input type="button"  value="获取json" id='btnJson'>
  10. </body>
  11. </html>
  12. <script type="text/javascript">
  13.     // 获取的是一个 如果要获取多个
  14.     // document.querySelectorAll(selector)
  15.     document.querySelector("#btnJson").onclick = function () {
  16.         var ajax = new XMLHttpRequest();
  18.         ajax.open('get','myJson.php');
  20.         ajax.send();
  22.         ajax.onreadystatechange = function () {
  23.             if (ajax.readyState==4&&ajax.status==200) {
  24.                 // json 字符串 是字符串 所以我们可以 通过  responseText获取
  25.                 console.log(ajax.responseText);
  27.                 // 转化为 js对象
  28.                 var jsObj = JSON.parse(ajax.responseText);
  30.                 console.log(jsObj);
  32.                 // 拼接ul s
  33.                 var str = '';
  35.                 str+='<ul>';
  36.                 str+='<li>'+jsObj.name+'</li>';
  37.                 str+='<li>'+jsObj.skill+'</li>';
  38.                 str+='<li>'+jsObj.friend+'</li>';
  39.                 str+='</ul>';
  41.                 // 设置到界面上
  43.                 document.body.innerHTML = str;
  44.             }
  45.         }
  46.     }
  47. </script>

演示效果：

02-Ajax入门和发送http请求 - 图2

jQuery 中的 Ajax

JQuery作为最受欢迎的js框架之一，常见的Ajax已经帮助我们封装好了，只需要调用即可。更为详细的api文档可以查阅：w3cSchool_JQueryAjax

格式举例：

  1. $.ajax({
  2.         url:'01.php',//请求地址
  3.         data:'name=fox&age=18',//发送的数据
  4.         type:'GET',//请求的方式
  5.         success:function (argument) {},// 请求成功执行的方法
  6.         beforeSend:function (argument) {},// 在发送请求之前调用,可以做一些验证之类的处理
  7.         error:function (argument) {console.log(argument);},//请求失败调用
  8.     })

代码举例：

（1）index.html

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>jquery-ajax</title>
  6. </head>
  7. <body>
  8. <input type="button" value="点击" id="btn">
  9. <div id="showInfo"></div>
  10. <script type="text/javascript" src="jquery-1.11.2.js"></script>
  11. <script type="text/javascript">
  12.     $(function(){
  14.         $("#btn").click(function(){
  15.             $.ajax({
  16.                 url:"data.php",//请求地址
  17.                 dataType:"text",
  18.                 type:"get",
  19.                 success:function(data){
  20.                     alert(data);
  21.                     //$("#showInfo").html(data);
  22.                 },
  23.                 error:function(e){
  24.                     console.log(e);
  25.                 }
  26.             });
  27.         });
  31.     });
  33. </script>
  34. </body>
  35. </html>

（2）data.php：

  1. <?php
  3. $text = 'hello world';
  5. echo $text;
  7.  ?>