原生AJAX基础（适合入门-新手）

最新推荐文章于 2024-08-08 16:10:15 发布

ttxxi_

最新推荐文章于 2024-08-08 16:10:15 发布

阅读量397

点赞数 1

分类专栏：前端文章标签： AJAX入门新手前端异步

本文链接：https://blog.csdn.net/ttxxi_/article/details/83991752

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

首先声明一下我只是个大二学生，写的东西很基础，因为我也只是刚刚才接触，所有这个个人觉得也适合和我一样刚刚开始学的人看一下，大佬们喷的时候可以肆无忌惮一点，我觉得我就需要骂一骂hhh

1.AJAX概述

Web 程序初的目的就是将信息（数据）放到公共的服务器，让所有网络用户都可以通过浏览器访问。

在此之前，我们可以通过以下几种方式让浏览器发出对服务端的请求，获得服务端的数据：

地址栏输入地址，回车，刷新特定元素的 href 或 src 属性表单提交

这些方案都是我们无法通过或者很难通过代码的方式进行编程（对服务端发出请求并且接受服务端返回的响应），如果我们可以通过 JavaScript 直接发送网络请求，那么 Web 的可能就会更多，随之能够实现的功能也会更多，至少不再是“单机游戏”

AJAX（Asynchronous JavaScript and XML），早出现在 2005 年的 Google Suggest，是在浏览器端进行网络编程（发送请求、接收响应）的技术方案，它使我们可以通过 JavaScript 直接获取服务端新的内容而不必重新加载页面。让 Web 更能接近桌面应用的用户体验。说白了，AJAX 就是浏览器提供的一套 API，可以通过 JavaScript 调用，从而实现通过代码控制请求与响应。实现网络编程。

能力不够 API 凑。

简单一点说，就是不需要我们刷新整个界面，重新加载所有资源，我们就可以只刷新局部信息，提高了用户体验

2.原生AJAX的基本使用

// 1. 创建一个 XMLHttpRequest 类型的对象 —— 相当于打开了一个浏览器 

var xhr = new XMLHttpRequest()
// 2. 打开与一个网址之间的连接 —— 相当于在地址栏输入访问地址 
xhr.open('GET', './time.php') 
// 3. 通过连接发送一次请求 —— 相当于回车或者点击访问发送请求 
xhr.send(null) 
// 4. 指定 xhr 状态变化事件处理函数 —— 相当于处理网页呈现后的操作
xhr.onreadystatechange = function () {   
// 通过 xhr 的 readyState 判断此次请求的响应是否接收完成   
    if (this.readyState === 4) { 
    // 通过 xhr 的 responseText 获取到响应的响应体     
    console.log(this)  
    } 
}

XMLHttpRequest()对象

最通用的定义为：XmlHttp是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。

来自MSDN的解释：XmlHttp提供客户端同http服务器通讯的协议。客户端可以通过XmlHttp对象(MSXML2.XMLHTTP.3.0)向http服务器发送请求并使用微软XML文档对象模型Microsoft® XML Document Object Model (DOM)处理回应。

现在的绝对多数浏览器都增加了对XmlHttp的支持，IE中使用ActiveXObject方式创建XmlHttp对象，其他浏览器如：Firefox、Opera等通过window.XMLHttpRequest来创建xmlhttp对象。

如需考虑IE5IE6老版本的兼容则需要写如下代码：

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

总之，AJAX的一切前提都是在XMLHttpRequest对象的基础之上的，可以把它理解成我们在浏览器内部又打开了一个浏览器

open（）方法

有三个参数：

第一个参数是请求的方式：post 或者 get 二选其一

第二个参数是请求的地址：相当于我们在浏览器导航栏输入网址

第三个参数是async异步为boolean类型：默认为true表示异步（一般都可以省略第三个参数，因为使用AJAX肯定都是需要异步请求的）

1、GET请求

通常在一次 GET 请求过程中，参数传递都是通过 URL 地址中的 ? 参数传递。（刚开始可以理解为传安全性较低的参数）

var xhr = new XMLHttpRequest()
// GET 请求传递参数通常使用的是问号传参
// 这里可以在请求地址后面加上参数，从而传递数据到服务端
xhr.open('GET', './delete.php?id=1')
// 一般在 GET 请求时无需设置响应体，可以传 null 或者干脆不传
xhr.send(null)
xhr.onreadystatechange = function (){
   if (this.readyState === 4) {
       console.log(this.responseText)
   }
}   

// 一般情况下 URL 传递的都是参数性质的数据（可以理解为安全性较低），而 POST 一般都是业务数据（可以理解为安全性较高）

2、POST请求

POST 请求过程中，都是采用请求体承载需要提交的数据。（安全性相对较高的数据）

var xhr = new XMLHttpRequest()
// open 方法的第一个参数的作用就是设置请求的
method xhr.open('POST', './add.php')
// 设置请求头中的 Content‐Type 为 application/x‐www‐form‐urlencoded
// 标识此次请求的请求体格式为 urlencoded 以便于服务端接收数据
xhr.setRequestHeader('Content‐Type', 'application/x‐www‐form‐urlencoded')
// 需要提交到服务端的数据可以通过 send 方法的参数传递
// 格式：key1=value1&key2=value2
xhr.send('key1=value1&key2=value2')
xhr.onreadystatechange = function () {
   if (this.readyState === 4) {
   console.log(this.responseText)
   }
}

send（）方法

通过连接发送一次请求 —— 相当于回车或者点击访问发送请求

如果是 GET请求则 send（）方法不传参或者括号内填null

因为在open（）方法中的第二个参数中我们已经通过？的方式传参了

如果是 POST请求则 send（）方法内部需要填写传递的参数

键值对的形式格式：key1=value1&key2=value2

需要注意的是：

如果我们请求是使用的POST请求，则我们需要在open（）方法后、send（）方法前设置请求头，GET请求则不需要

xhr.open('POST', './add.php')
// 设置请求头中的 Content‐Type 为 application/x‐www‐form‐urlencoded
// 标识此次请求的请求体格式为 urlencoded 以便于服务端接收数据
xhr.setRequestHeader('Content‐Type', 'application/x‐www‐form‐urlencoded') 
// 需要提交到服务端的数据可以通过 send 方法的参数传递 
// 格式：key1=value1&key2=value2 
xhr.send('key1=value1&key2=value2')

readyStage

由于 readystatechange 事件是在 xhr 对象状态变化时触发（不单是在得到响应时），也就意味着这个事件会被触发多次，所以我们有必要了解每一个状态值代表的含义：

readyState 状态描述说明
0 UNSENT 代理（XHR）被创建，但尚未调用 open() 方法
1 OPENED open() 方法已经被调用，建立了连接。
2 HEADERS_RECEIVED send() 方法已经被调用，并且已经可以获取状态行和响应头。
3 LOADING 响应体下载中， responseText 属性可能已经包含部分数据。
4 DONE 响应体下载完成，可以直接使用 responseText

var xhr = new XMLHttpRequest()
console.log(xhr.readyState)
// => 0
// 初始化 请求代理对象
xhr.open('GET', 'time.php')
console.log(xhr.readyState)
// => 1
// open 方法已经调用，建立一个与服务端特定端口的连接
xhr.send()
xhr.addEventListener('readystatechange', function () {
   switch (this.readyState) {
       case 2:
           // => 2
           // 已经接受到了响应报文的响应头
           // 可以拿到头
           // console.log(this.getAllResponseHeaders())        
           console.log(this.getResponseHeader('server'))
           // 但是还没有拿到体
           console.log(this.responseText)
           break      
       case 3:
           // => 3
           // 正在下载响应报文的响应体，有可能响应体为空，也有可能不完整
           // 在这里处理响应体不保险（不可靠）
           console.log(this.responseText)
           break
       case 4:
           // => 4
           // 一切 OK （整个响应报文已经完整下载下来了）
           // 这里处理响应体
           console.log(this.responseText)
           break   
        } 
})

因此通过理解每一个状态值的含义得出一个结论：一般我们都是在 readyState 值为 4 时，执行响应的后续逻辑。使用如下代码：

xhr.onreadystatechange = function () {
   if (this.readyState === 4) {
     // 后续逻辑......   
    } 
}

符合HTTP协议

本质上 XMLHttpRequest 就是 JavaScript 在 Web 平台中发送 HTTP 请求的手段，所以我们发送出去的请求任然是 HTTP 请求，同样符合 HTTP 约定的格式：

// 设置请求报文的请求行 
xhr.open('GET', './time.php') 
// 设置请求头 xhr.setRequestHeader('Accept', 'text/plain') 
// 设置请求体 xhr.send(null)   
xhr.onreadystatechange = function () {
   if (this.readyState === 4) {
       // 获取响应状态码    
       console.log(this.status)
       // 获取响应状态描述
       console.log(this.statusText)
       // 获取响应头信息
       console.log(this.getResponseHeader('Content‐Type'))
       // 指定响应头
       console.log(this.getAllResponseHeader())
       // 全部响应头     
       // 获取响应体
       console.log(this.responseText)
       // 文本形式
       console.log(this.responseXML)
       // XML 形式，了解即可不用了
   } 
}

参考链接：
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest

https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

返回数据类型

因为我们需要服务器返回的东西往往不是一个简单的文本那么简单，所以我们需要将返回的数据类型存储为一种特定的格式以储存返回的众多数据

提问：如果希望服务端返回一个复杂数据，该如何处理？

关心的问题就是服务端发出何种格式的数据，这种格式如何在客户端用 JavaScript 解析。

1.XML

一种数据描述手段。本人没有实际操作过，但是网上资料显示现在已经淘汰了，基本现在的项目不用了。淘汰的原因：数据冗余太多。

2.JSON

也是一种数据描述手段，类似于 JavaScript 字面量方式服务端采用 JSON 格式返回数据，客户端按照 JSON 格式解析数据。

不管是 JSON 也好，还是 XML，只是在 AJAX 请求过程中用到，并不代表它们之间有必然的联系，它们只是数据协议罢了

同步与异步

同步：一个人在同一个时刻只能做一件事情，在执行一些耗时的操作（不需要看管）不去做别的事，只是等待
异步：在执行一些耗时的操作（不需要看管）去做别的事，而不是等待

xhr.open() 方法第三个参数要求传入的是一个 bool 值，其作用就是设置此次请求是否采用异步方式执行，默认为 true ，如果需要同步执行可以通过传递 false 实现：

console.log('before ajax') 
var xhr = new XMLHttpRequest() 
// 默认第三个参数为 true 意味着采用异步方式执行 
xhr.open('GET', './time.php', true)
xhr.send(null) 
xhr.onreadystatechange = function () {
   if (this.readyState === 4) {
     // 这里的代码最后执行
     console.log('request done')
   }
}
console.log('after ajax')

如果采用同步方式执行，则代码会卡死在 xhr.send() 这一步：

console.log('before ajax') 
var xhr = new XMLHttpRequest() 
// 同步方式 xhr.open('GET', './time.php', false) 
// 同步方式 执行需要 先注册事件再调用 send，否则 readystatechange 无法触发 xhr.onreadystatechange = function () {
   if (this.readyState === 4) {
     // 这里的代码最后执行
     console.log('request done')
   }
}
xhr.send(null) console.log('after ajax')

演示同步异步差异。
一定在发送请求 send() 之前注册 readystatechange （不管同步或者异步）：

为了让这个事件可以更加可靠（一定触发），一定是先注册

最后我只是一个刚刚大二的菜鸡，一边学校里面学习一边总结，如果有错误，请不要怜香惜玉，尽情的批判我吧！这是我在学校实训项目结束后想总结一下才写的，借鉴了我视频学习资料里面的一些源码。再次声明我是菜鸡。谢谢

ttxxi_

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
原生AJAX基础（适合入门-新手）

首先声明一下我只是个大二学生，写的东西很基础，因为我也只是刚刚才接触，所有这个个人觉得也适合和我一样刚刚开始学的人看一下，大佬们喷的时候可以肆无忌惮一点，我觉得我就需要骂一骂hhh 1.AJAX概述Web 程序初的目的就是将信息（数据）放到公共的服务器，让所有网络用户都可以通过浏览器访问。在此之前，我们可以通过以下几种方式让浏览器发出对服务端的请求，获得服务端的数据：地址栏...
复制链接

扫一扫

专栏目录