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);

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

  1. 参数为false的时候,此为同步进行,当代码执行到该请求的时候,在请求尚未得到回应,下面代码不再执行,直到该请求超时

  2. 参数为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可以输出一个或多个字符串。输出的内容前台可以拿得到。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章