详解ajax使用步骤

最新推荐文章于 2024-09-05 15:06:14 发布

yun_shuo

最新推荐文章于 2024-09-05 15:06:14 发布

阅读量360

点赞数 2

分类专栏： JavaScript 文章标签： ajax

本文链接：https://blog.csdn.net/yun_shuo/article/details/116135191

版权

JavaScript 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。ajax的使用使网页异步刷新，在不重新加载整个页面时，对网页的局部进行刷新。ajax的使用并不难，可分为以下大步
1、实例化对象（创建请求对象）

var xhr=new XMLHttpRequest();

这里一般使用xhr作为请求对象名，在开发中看到xhr的变量就可以知道是一个ajax请求对象。使用到的XmlHttp可以理解为更新网页是部分内容而不需要刷新整个页面

2、调用open方法，设置请求方法和请求路径。

xhr.open("get","data.php");

使用xmlhttprequest对象的open（）和send（）方法发送资源请求给服务器。
xmlhttp.open(method,url,async) method包括get 和post，url主要是文件或资源的路径，async参数为true(代表异步)或者false（代表同步）
xhttp.send();使用get方法发送请求到服务器。
xhttp.send(string);使用post方法发送请求到服务器。
open方法里的参数有三个(method,url,async)

使用get请求需要传入参数时在文件地址后面加?参数名1=参数值1&参数名2=参数值2…的方式进行传参

3、设置请求头(get请求不写这一步)

xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');

4、发送请求

xhr.send();

在写post方法请求时，需要向数据库发送数据，就在send括号中传递。

5、监听响应完成事件
为处理浏览器兼容问题需使用以下方法

xhr.onreadystatechange=function(){
	if(xhr.readyState==4 && xhr.status==200){
		//响应完成时触发
	}
}

onreadystatechange函数，当发送请求到服务器，我们想要服务器响应执行一些功能就需要使用onreadystatechange函数，每次xmlhttprequest对象的readyState发生改变都会触发onreadystatechange函数。
onreadystatechange属性存储一个当readyState发生改变时自动被调用的函数。
readyState属性，XMLHttpRequest对象的状态，改变从0到4，0代表请求未被初始化，1代表服务器连接成功，2请求被服务器接收，3处理请求，4请求完成并且响应准备。
status属性，200表示成功响应，404表示页面不存在。
在onreadystatechange事件中，服务器响应准备的时候发生，当readyState4和status200的时候服务器响应准备。

xhr.readystate表示请求状态， 0 ：未初始化；1 ：请求准备完毕； 2 ：请求接收中；3 ：请求处理中； 4 ：请求响应完成。
xhr.status表示http状态码，200：服务器成功返回了页面；400：语法错误导致服务器不识别；401：请求响应用户认证；404：指定url在服务器上找不到；500：服务器遇到意外错误，无法完成请求；503：由于服务器过载或维护导致无法完成请求。

下面举一个ajax使用的小实例

<body>
  <input type="button" value="请求1" id="btn1">
  <input type="button" value="请求1" id="btn2">
  <script>
    //封装ajax的步骤
    function ajax(type, url, data) {
      var xhr = new XMLHttpRequest();
      //判断type是get还是post
      if (type == "get") {
        url += "?" + data;
      }
      xhr.open(type, url);
      //是post就讲参数传send中
      if (type == "get") {
        xhr.send();
      } else {
        xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
        //发送请求
        xhr.send(data);
      }
      //不传参数 get和post请求一样
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
          console.log(xhr.responseText);
        }
      }
    }
    //点击
    document.getElementById("btn1").onclick = function () {
      ajax("get", "data1.php", "name=jack");
    }
    document.getElementById("btn2").onclick = function () {
      ajax("post", "data2.php", "name=rose");
    }
  </script>
</body>