JS 原生 AJAX 请求

目录


AJAX 简介

一、JS 原生 AJAX 请求

实现 AJAX 的基本步骤

XMLHttpRequest 对象

XMLHttpRequest 对象方法

1、创建 XMLHttpRequest 对象

2、设置响应 HTTP 请求状态变化的函数

onreadystatechange 事件

3、向服务器发送请求

GET 请求

POST 请求

Content-type常见类型：

4、服务器 响应

完整实例

总结


AJAX 简介


AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

一、JS 原生 AJAX 请求

实现 AJAX 的基本步骤

要完整实现一个AJAX 异步调用和局部刷新，通常需要以下几个步骤：

  1. 创建XML HttpRequest 对象，即创建一个异步调用对象。
  2. 创建一个新的HTTP 请求，并指定该HTTP 请求的方法，URL及验证信息
  3. 设置响应HTTP请求状态变化的函数。
  4. 发送HTTP 请求。
  5. 获取异步调用返回的数据。
  6. 使用JavaScript和DOM 实现局部刷新

XMLHttpRequest 对象

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

XMLHttpRequest 对象方法

方法

描述

new XMLHttpRequest()

创建新的 XMLHttpRequest 对象

abort()

取消当前请求

getAllResponseHeaders()

返回头部信息

getResponseHeader()

返回特定的头部信息

open(method, url, async, user, psw)

规定请求

  • method：请求类型 GET 或 POST
  • url：服务器文件位置
  • async：true（异步）或 false（同步）
  • user：可选的用户名称
  • psw：可选的密码

send()

将请求发送到服务器，用于 GET 请求

send(string)

将请求发送到服务器，用于 POST 请求

setRequestHeader()

向要发送的报头添加标签/值对

1、创建 XMLHttpRequest 对象

AJAX 的核心是 XMLHttpRequest 对象。

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法：

new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

new ActiveXObject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

// 创建XMLHttpRequest对象
     var xmlhttp;    
     if (window.XMLHttpRequest) {
         // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
         xmlhttp = new XMLHttpRequest();
     } else if (window.ActiveXObject) { 
         // IE6, IE5 浏览器执行代码
         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
     } else {
         alert("您的浏览器不支持此功能。")
     }

2、设置响应 HTTP 请求状态变化的函数

onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

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

属性

描述

onreadystatechange

存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

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

status

200: "OK" , 404: 未找到页面

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

xmlhttp.onreadystatechange=function(){
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
         //响应成功后要执行的操作
     }
 }

3、向服务器发送请求

GET 请求

get 发送请求时，需要传给后台的数据通过 url 来传递，多个参数之间使用 & 符号连接，使用时如下：

xmlhttp.open("GET","ajax.php?name=hello&age=world",true);
 xmlhttp.send();

POST 请求

使用 post 方式发送请求时，使用send来发送数据，有时需要设置数据格式，类似表单那样，此时可通过 setRequestHeader 设置发送的数据格式

xmlhttp.open("POST","ajax.php",true);
 xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
 xmlhttp.send("name=hello&age=world");

Content-type常见类型：

常见的媒体格式类型如下：

  • text/html ： HTML格式
  • text/plain ：纯文本格式
  • text/xml ： XML格式
  • image/gif ：gif图片格式
  • image/jpeg ：jpg图片格式
  • image/png：png图片格式

以application开头的媒体格式类型：

  • application/xhtml+xml ：XHTML格式
  • application/xml： XML数据格式
  • application/atom+xml ：Atom XML聚合格式
  • application/json： JSON数据格式
  • application/pdf：pdf格式
  • application/msword ： Word文档格式
  • application/octet-stream ： 二进制流数据（如常见的文件下载）
  • application/x-www-form-urlencoded ： <form encType="">中默认的encType，form表单数据被编码为key/value格式发送到服务器（表单默认的提交数据的格式）

另外一种常见的媒体格式是上传文件之时使用的：

  • multipart/form-data ： 需要在表单中进行文件上传时，就需要使用该格式

4、服务器 响应

通常我们需要获取服务器返回的信息，然后对我们的网页做相对应的结果展示。

通常使用 XMLHttpRequest 的 responseText 或 responseXML 属性。(responseXML 目前已被 json 取代)。

responseText ===> 获取到的是字符串形式。接收到可直接使用，无需转换。

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

responseXML ===> 获取到 XML 形式的数据。使用时需要解析，如下：

获取到的 XML 数据:
 <student>
     <name>小朋友</name>
     <age>18</age> 
 </student>
解析时:
 document.getElementsByTagName("name")[0];
 document.getElementsByTagName("name")[1];

完整实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 原生 AJAX 请求</title>
</head>
<body>
    <h2 id="demo1"></h2>
    <h2 id="demo2"></h2>
</body>
<script>
    
    //创建XMLHttpRequest对象
    var xmlhttp;    
    if (window.XMLHttpRequest) {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp = new XMLHttpRequest();
    } else if (window.ActiveXObject) { 
        // IE6, IE5 浏览器执行代码
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    } else {
        alert("您的浏览器不支持此功能。")
    }

    xmlhttp.onreadystatechange = function() {
        
        if (this.readyState == 4 && this.status == 200) {
            //服务器响应，将 JSON 对象转发为 JavaScript 对象
            myObj = JSON.parse(this.responseText);
            document.getElementById("demo1").innerHTML = myObj.title;
            document.getElementById("demo2").innerHTML = myObj.slogan;
        }
    }
    
        //  向服务器发送GET请求
        //	规定请求的类型、URL 以及是否异步处理请求
        xmlhttp.open("GET", "http://127.0.0.1:5500/ajax.json", true);
    
        //将请求发送到服务器
        xmlhttp.send();
    
</script>
</html>

 ajax.json 文件内容如下：

{
     "title":"JavaScript 原生 AJAX 请求",
     "slogan":"学的不仅是技术，更是梦想"
 }

总结

        以上就是今天要讲的内容，本文仅仅简单介绍了 JavaScrpit 中 AJAX 的使用，后期会发布如何使用 Jquery 发送 AJAX 请求。如果没有 jQuery，AJAX 编程还是有些难度的。编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要几行简单的代码，就可以实现 AJAX 功能