AJAX

最新推荐文章于 2022-06-19 13:50:53 发布
最新推荐文章于 2022-06-19 13:50:53 发布
阅读量80 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yyy_wj/article/details/102614273
版权

1、概述

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

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

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

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

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

说白了，AJAX 就是浏览器提供的一套 API，可以通过 JavaScript 调用，从而实现通过代码控制请求与响应。实现 网络编程。

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

2.1. readyState

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

 

2.1.1. 时间轴

 

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) { 
    // 后续逻辑......  
    }
 }

2.2. 遵循 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 形式，了解即可不用了   } }

3. 具体用法

3.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 一般都是业务数据

3.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)  
   } 
}

3.3. 同步与异步

关于同步与异步的概念在生活中有很多常见的场景，举例说明。

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

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 （不管同步或者异步）

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

了解同步模式即可，切记不要使用同步模式

3.4. 响应数据格式

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

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

3.4.1. XML 

  • 一种数据描述手段基本现在的项目不用了。淘汰的原因：数据冗余太多

3.4.2. JSON 

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

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

3.5. 处理响应数据渲染

模板引擎：

模板引擎实际上就是一个 API，模板引擎有很多种，使用方式大同小异，目的为了可以更容易的将数据渲染到 HTML中
3.6. 兼容方案

XMLHttpRequest 在老版本浏览器（IE5/6）中有兼容问题，可以通过另外一种方式代替

var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP')

4、封装

4.1. AJAX 请求封装

函数就可以理解为一个想要做的事情，函数体中约定了这件事情做的过程，直到调用时才开始工作。
将函数作为参数传递就像是将一个事情交给别人，这就是委托的概念

/** 
 * 发送一个 AJAX 请求
 * @param  {String}   method 请求方法 
 * @param  {String}   url    请求地址 
 * @param  {Object}   params 请求参数  
 * @param  {Function} done   请求完成过后需要做的事情（委托/回调）  */ 

function ajax (method, url, params, done) {
   // 统一转换为大写便于后续判断  
 method = method.toUpperCase()    

  // 对象形式的参数转换为 urlencoded 格式
  var pairs = []
  for (var key in params) {
     pairs.push(key + '=' + params[key])
   }   
  var querystring = pairs.join('&')

  var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP')     
  xhr.addEventListener('readystatechange', function () { 
    if (this.readyState !== 4) return    
 // 尝试通过 JSON 格式解析响应体
     try {      
        done(JSON.parse(this.responseText))
      } catch (e) { 
      done(this.responseText) 
    }  
 })     

// 如果是 GET 请求就设置 URL 地址 问号参数 
  if (method === 'GET') { 
    url += '?' + querystring 
  } 
  
 xhr.open(method, url)    

 // 如果是 POST 请求就设置请求体  
 var data = null  
 if (method === 'POST') { 
    xhr.setRequestHeader('Content‐Type', 'application/x‐www‐form‐urlencoded')     data = querystring 
  }
   xhr.send(data)
 }   

ajax('get', './get.php', { id: 123 }, function (data) {
   console.log(data) 
}) 

ajax('post', './post.php', { foo: 'posted data' }, function (data) {
   console.log(data)
})

4.2. jQuery 中的 AJAX

jQuery 中有一套专门针对 AJAX 的封装，功能十分完善，经常使用，需要着重注意

参考：

4.2.1. $.ajax

$.ajax({
   url: './get.php', 
   type: 'get', 
   dataType: 'json',
   data: { id: 1 },
   beforeSend: function (xhr) { 
    console.log('before send')   
   },   
   success: function (data) {
     console.log(data)   
   },   error: function (err) {
     console.log(err)   
   },   
   complete: function () {
     console.log('request completed')  
   } 
})

常用选项参数介绍：

  •     url：请求地址
  •     type：请求方法，默认为 get
  •    dataType：服务端响应数据类型
  •    contentType：请求体内容类型，默认 application/x-www-form-urlencoded
  •    data：需要传递到服务端的数据，如果 GET 则通过 URL 传递，如果 POST 则通过请求体传递
  •    timeout：请求超时时间 beforeSend：请求发起之前触发
  •    success：请求成功之后触发（响应状态码 200）
  •    error：请求失败触发
  •    complete：请求完成触发（不管成功与否）

4.2.2. $.get 
GET 请求快捷方法

$.get(url,data,callback)


4.2.3. $.post 
POST 请求快捷方法

$.post(url,data,callback)

 

yyy_wj
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ajax
huangyh技术栈
09-28 3万+
1.1 什么是ajax: Ajax即“Asynchronous Javascript And XML”(异步JavaScript 和XML)，是指一种创建交互式网页应用的网页开发技术。Ajax=异步JavaScript和XML（标准通用标记语言的子集）。通过在后台与服务器进行少量数据交换,Ajax可以使用网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新（无刷新...
AJAXCALL
10-31
AJAXCALL
Ajax
C_hydar的博客
02-11 5373
Ajax Ajax 是一种无需重新加载整个网页的情况下，能够更新部分网页的技术。 Ajax = 异步 JavaScript + XML。 Ajax 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 Ajax 用于创造动态性更强的应用程序 Ajax 可用来与数据库进行动态通...
看这一篇就够了！-Ajax详解
Oriental_的博客
03-15 16万+
今天来聊一聊前后端交互的重要工具Ajax 结合上次跟大家分享的前后端交互基础，如果还没有看过的童鞋，以下是传送门 前后端交互详解 AJAX - 到底什么是Ajax? ajax 全名 async javascript and XML 是前后台交互的能⼒ 也就是我们`客户端给服务端发送消息的⼯具，以及接受响应的⼯具 是⼀个 默认异步执⾏机制的功能AJAX分为同步（async = false...
Ajax请求的五个步骤
热门推荐
chaopingyao的博客
06-02 16万+
Ajax请求的五个步骤 一、定义 1、什么是Ajax Ajax：即异步 JavaScript 和XML。Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页(不使用 Ajax)如果需要更新内容，必需重载整个网页面。 2、同步与异步的区别 同步提交：当用户发送请求时，当前页面不可以使用，服务器响应页面到客户端，响应完成，用户才可以使用页面。 异步提交：当用户发送请
AJAX 详解
06-19 1万+
Ajax基础知识，及常见问题详解
Ajax实现文件下载
12-11
JQuery的ajax函数的返回类型只有xml、text、json、html等类型，没有“流”类型，所以我们要实现ajax下载，不能够使用相应的ajax函数进行文件下载。但可以用js生成一个form，用这个form提交参数，并返回“流”类型的...
Ajax详解
07-22
资源名称：Ajax详解内容简介：《Ajax 详解》电子书 chm格式，是《四天学会Ajax》一书扩展，更加详细的讲述Ajax的方方面面。 内容简要给大家说明一下：Ajax简介、使用Javaｓｃｒｉｐｔ和Ajax发出异步请求、Ajax中的...
ajax poller
10-29
ajax poller 实现代码。
Ajax实现登录案例
10-14
主要为大家详细介绍了Ajax实现登录案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
A4打印模板-画图设计设计师产品草稿图纸-网格纸A4打印模板高清待办练字模板PDF下载.pdf
最新发布
04-23
A4打印模板-画图设计设计师产品草稿图纸-网格纸A4打印模板高清待办练字模板PDF下载
ISA-95 流程圣经，描述了PLM企业资源计划、MES制造执行系统、ERP企业资源计划系统、SCM供应链管理系统之间的关系
04-23
ISA-95 流程圣经，描述了PLM企业资源计划、MES制造执行系统、ERP企业资源计划系统、SCM供应链管理系统、客户关系管理CRM之间的关系
年会活动颁奖领奖音乐74首
04-23
颁奖领奖音乐在各种表彰、嘉奖或庆祝场合中扮演着至关重要的角色，其作用主要体现在以下几个方面： 1.营造氛围： 2.情绪引导： 3.节奏控制： 4.品牌塑造： 5.文化表达： 6.致敬与激励： 综上所述，颁奖领奖音乐在颁奖典礼中不仅作为背景音效存在，更是情感传递、氛围营造、流程把控、品牌塑造、文化展现和精神激励的重要载体，对于提升典礼的整体效果和观众体验有着不可忽视的影响。
这个项目是用于个人参加浙江大学移动创新竞赛而使用。.zip
04-23
这个项目是用于个人参加浙江大学移动创新竞赛而使用。
手绘稿模板iphone_x_wireframe_template_-_a4A4打印模板高清待办练字模板PDF下载.pdf
04-23
手绘稿模板iphone_x_wireframe_template_-_a4A4打印模板高清待办练字模板PDF下载
Java基础核心+文件输入流+文件输出流
04-23
使用最简单的输入流和输出流实现 文件复制粘贴功能。这是第二种方式，与第一种方式的不同在于我们使用byte[]数组盛放从myFile读取到字节。比第一种方式，速度会快一些。
Web APIs-Dom获取&属性操作（理论+实战篇）-获取随机图片案例资料
04-23
Web APIs-Dom获取&属性操作（理论+实战篇）-获取随机图片案例资料
免安装，无缝从Linux系统上传下载文件
04-23
免安装，无缝从Linux系统上传下载文件
安卓11.0以上版本支持 手指单个手指双手指操作
04-23
apk导入手机文件夹下载
ajax嵌套ajax
07-28
在前端开发中，可以使用Ajax嵌套Ajax来实现多个异步请求的依次执行。具体步骤如下： 1. 在第一个Ajax请求的回调函数中，发送第二个Ajax请求。可以使用`$.ajax()`方法或者其他类似的方法发送异步请求。 2. 在第二个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值