JS中Ajax入门

AJAX是网页交互过程中，通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新，不必加载重复的内容，提高了交互速度。

一、XMLHttpRequest 事件

在我们与后台交互过程中，我们首先需要创建XMLHttpRequest对象，创建后我们就可以通过发送请求到服务器，然后我们执行一些基于响应的任务。

readyState存有XMLHttpRequest的状态信息，会随着状态的改变返回响应的参数，而每次 readyState 改变时，就会触发onreadystatechange事件。

下面是 XMLHttpRequest 对象的三个重要的属性：

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	HTTP: Status 200 – 服务器成功返回网页 HTTP: Status 404 – 请求的网页不存在 HTTP: Status 503 – 服务不可用

二、`open()`函数

xml.open(method,url,boolean);

open()函数有三个参数，第一个是向后台发送数据的方式，分别是get和post。

第二个参数是请求的地址，我们直接写上请求的地址即可，如果是get请求的话，必要时加上我们需要发送给后台的参数。通常的写法如下：

//'?'是分隔符
//'&'是参数连接符
xml.open("GET","/xampp/ajax/ajax01.php?age=26&name="+name,true);

第三个参数是发送请求的同步异步：

参数为false的时候，此为同步进行，当代码执行到该请求的时候，在请求尚未得到回应，下面代码不再执行，直到该请求超时
参数为true的时候，此为异步进行，当代码执行到该请求的时候，不论是否得到后台回应，代码都会执行下去，不会出现阻塞现象

三、GET和POST请求

get请求：

xml.open("GET","/xampp/ajax/ajax01.php?name="+name,true);
xml.send(null);

post请求：

xml.open("POST","/xampp/ajax/ajax01.php",true);
xml.send("name=Gao&age=25");

二者在发送请求的区别在于get请求是将需要添加的参数放于open()函数中，send()中不发送任何信息，而post请求是将发送到后台的信息通过send()函数发送到后台。

同时get一般发送数据量比较小的数据，并且地址栏能看到发送的信息，所以安全性较差。而post的请求可以发送大量数据，并且前端界面看不到发送的信息，安全性较高。

四、例子

点击按钮，向后台发送数据，将后台返回的数据文本放于id=data的div中。

<body>
    <input type="text" id="name" value="LiHua" />
    <input type="button" value="按钮" onclick="submit()"/>
    <div id="data"></div>
    <script type="text/javascript">
        var name = document.getElementById("name").value;
        function submit(){
            //在后台与前台交互中我们需要创建 XMLHttpRequest 对象
            var xml=new XMLHttpRequest();
            //readyState属性发生改变触发onreadystatechange函数
            xml.onreadystatechange=function(){
                //成功后readyState为4，status为200
                if(xml.readyState === 4 || xml.status === 200){
                    //获取返回的数据
                    document.getElementById("data").innerHTML=xml.responseText;
                }
            }
            //以get的方式向后台发送请求，并且为异步
            xml.open("GET","ajax.php?name="+name,true);
            xml.send(null);
        }
    </script>
</body>

五、后台代码

之前在学习ajax的时候，不知道后台代码是什么，不知道怎么发送请求，后台怎么处理的，这里我就贴出来简单的后台处理代码，让你清楚后台简单的一个流程。

<?php
      $name = $_GET["name"];
      echo 'Hello '.$name;
?>

这里我用的是php后端语言，首先是声明一个变量$name，$_GET是php内带函数，用于获取前台以GET请求发送的数据。echo可以输出一个或多个字符串。输出的内容前台可以拿得到。