ajax-异步JavaScript和XML

什么是ajax?

  ajax是异步的javascript和XML ( Asynchronous Javascript And XML )

  优点：节省用户操作时间，提高用户体验。减少数据请求次数。

什么是异步？同步？

  异步是非阻塞模式，前面的代码不会影响后面代码执行。

  同步是阻塞模式，要前面的执行后再执行后面的。

ajax请求后台数据流程

  1 创建 ajax 对象

var xhr=new XMLHttpRequest();

  兼容ie低版本：

if(window.XMLHttpRequest){

xhr=new XMLHttpRequest();

}else{

//ie低版本

xhr=new ActiveXObject('Microsoft.XMLHTTP');

}

  2 创建请求

  调用open方法。

xhr.open()

  open方法有三个参数。

  第一个： 提交方式(method) ，一般有两种。 get 和 post 。

  第二个： 请求地址url。

  第三个： 异步还是同步。 true 和 false 。 默认为 true ，异步。

xhr.open('get','1.txt','true')

  3 发送请求

  相当于表单 form 中的 submit 。

  调用 send() 方法。

xhr.send();

  4 判断 ajax 状态

//当状态发生改变

xhr.onreadystatechange=function(){

//如果是所需状态

if(xhr.readyState==4){

alert(xhr.responseText) //弹出请求到的文本数据

}

  onreadystate 当ajax状态发生改变的时候

  readystate 状态：

    0 ajax对象已创建。

    1 开始调用 send 方法，发送数据。

    2 数据已返回，但没有解析。

    3 表示数据正在解析中。

    4 表示所有工作已经完成，可以调用数据了。

例：通过ajax请求txt中的文本

  1. 搭建本地服务器环境。

  2. 创建文件 1.txt ，内容：“txt中的文本”

  3. 创建文件 index.html ，js内容：

//1 创建 ajax 对象

var xhr=new XMLHttpRequest();

//2 创建请求

xhr.open('get','1.txt','true')

//3 发送请求

xhr.send();

//4 判断状态

xhr.onreadystatechange=function(){

if(xhr.readyState==4){

alert(xhr.responseText)

}

  4. 访问 127.0.0.1 。

  还可以同时判断服务器状态码： status==200 表示所请求的文档已找到并正常返回。

if(xhr.readyState==4&&xhr.status==200){

alert(xhr.responseText)

}

服务器状态码

  200 ok 请求的文档已经找到并正确返回。

  304 not modified 拥有一个本地缓存副本，服务端内容与其相同。

  403 Forbidden 请求者对所请求的文档不具备相应权限。

  404 notfound 所请求的文档没有找到。

get与post的区别

  post

    统一把数据放在页面的请求头中。

    理论上 post 携带的数据没有限制（但是服务器一般有限制）。

  get

    统一把数据放在url?的后面。

    get 方式提交的数据长度有限制，因为 url 长度有限制，数据量根据浏览器不同。

  相同点：

    把数据名和数据值用等号(=)连接，多组数据用和号(&)连接。

  不同点：

    与 post 相比， get 方式简单、快速，大部分情况下能用。

    以下几种使用post请求：

    1. 向服务器发送大量数据；

    2. 向服务器发送未知字符的用户输入时，post更加可靠。（不知道用户会输入什么的时候）

例：通过get发送和接收数据

  get.php 文件中的内容：

<?php

header('content-type:text/html,charset="utf-8"');

error_reporting(0);

$username=$_GET['username'];

$age=$_GET['age'];

echo "您的姓名是：{$username},年龄是{$age}";

  普通方式发送和接收数据：





  index.html 文件中的内容：

    <!--

    Author: XiaoWen

    Create a file: 2016-12-28 13:51:39

    Last modified: 2017-01-04 18:40:25

    Start to work:

    Finish the work:

    Other information:

    -->

    <!DOCTYPE html>

    <html lang="en">

    <head>

      <meta charset="UTF-8">

      <title>ajax</title>

    </head>

    <body>

      <form action="get.php" method="get" >

        姓名: <input type="text" name="username"/>

        年龄: <input type="text" name="age"/>

        <input type="submit" value="提交" />

      </form>

    </body>

    </html>

  当点击提交后，页面的url跳转并变成：

  http://127.0.0.1/get.php?username=小文&age=21

  get发送的数据是拼接在url中的。

  可以看出：

  get.php?

  1 请求文件的后面以问号(?)拼接：

  username=小文&age=21

  2 数据以 name属性=value值 的方式拼接，多个数据用和号(&)接连：

  上面是普通的提交方式，提交时页面url会改变会跳转。

  那么，使用 ajax 是这样的：

  其实也就是 不使用html标签来发送请求，而是使用js来拼接出url，使用 ajax 来发送和接收数据。

ajax发送和接收数据：


  index.html 文件中的内容：

    <!--

    Author: XiaoWen

    Create a file: 2016-12-28 13:51:39

    Last modified: 2017-01-04 18:40:36

    Start to work:

    Finish the work:

    Other information:

    -->

    <!DOCTYPE html>

    <html lang="en">

    <head>

      <meta charset="UTF-8">

      <title>ajax</title>

    </head>

    <body>

      <!-- <form action="get.php" method="get" > -->

      姓名: <input type="text" name="username"/>

      年龄: <input type="text" name="age"/>

      <input type="submit" value="提交" />

      <!-- </form> -->

    </body>

    <script>

      var input=document.getElementsByTagName('input');

      var str;

      input[2].onclick=function(){

        //http://127.0.0.1/get.php?username=小文&age=21

        str='get.php?'+input[0].name+'='+input[0].value+'&'+input[1].name+'='+input[1].value;

        var xhr=new XMLHttpRequest()

        xhr.open('get',str,true)

        xhr.send()

        xhr.onreadystatechange=function(){

          if(xhr.readyState==4){

            console.log(xhr.responseText)

          }

        }

      }

    </script>

    </html>

state 和 status

　　state 已知的

　　status 不确定的

　　例：

　　readyState 值一般就5个
　　statusText 可以任意的文字
　　onreadystatechange 值一般就5个
　　window.status 可以任意的文字