04-03：卡其漫画之AJAX介绍

gzqd2018
257 阅读4分钟

前言

hello，大家好，今天我们来介绍一下在前后端交互过程中一个非常非常重要的技术AJAX，使得用户体验更棒!

内容概要

本章节主要是介绍一下什么是AJAX，AJAX带来了什么样的完美用户体验，以及如何来实现AJAX技术以及JSON数据格式

​
​

AJAX应用场景介绍

首先来看一下AJAX比较常见的应用情景，以便可以深刻的理解为什么要使用AJAX这门技术。

当我们某些网站注册邮箱的时候，在邮件地址处输入"chuanzhiboke"几个拼音后，光标一离开

当前的输入框，就会立刻显示该邮件地址已经被注册，其实这就是一个使用AJAX技术的真实场

景。当光标一离开文本输入框的时候，浏览器会使用AJAX技术向服务器发送一个请求，查询包

含"chuanzhiboke"的账号，如果查到了，服务器会把查询到的结果响应给浏览器，最后浏览器

会根据结果给出提示，这样大大的提高了用户体验，以便提醒用户及时更换一个新的邮件地址.


通过以上动图，我们不难发现：

  • 整个过程中页面没有整体刷新，只是局部刷新了，这样可以提高效率

  • 在请求发出后，浏览器不用等待服务器响应结果就可以进行其他操作；

  • 服务器响应内容不再是整个页面，而是页面中的局部内容数据，

  • 综上可以明白，AJAX可以让用户体验更好，效率更高

AJAX介绍

了解了AJAX的具体应用场景后，我们再来介绍一下什么是AJAX?

AJAX其实是这几个单词的缩写，Asynchronous JavaScript + XML（异步JavaScript和

XML），它有如下几个特点：

  • AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

  • AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

  • AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

尽管X在AJAX中代表XML, 但由于[JSON]的许多优势，比如更加轻量以及作为Javascript的一部

分，目前JSON的使用比XML更加普遍。JSON和XML都被用于在Ajax模型中打包信息。有关

JSON的知识点需要更加的重点掌握。

JSON即 JavaScript Object Notation，另一种轻量级的文本数据交换格式，独立于语言。

语法规则如下：

1、JSON 中属性名称必须用双引号包裹

2、JSON 中表述字符串必须使用双引号

3、JSON 中不能有单行或多行注释

4、JSON中数据由逗号分隔(最后一个健/值对不能带逗号)

5、JSON中花括号保存对象方括号保存数组

6、JSON 没有 undefined 这个值

 [   
   {     
    "id": 1,     
    "name": "tom",       "age": 18,     
  "gender": "男",     
  "zhuanye": "前端",     
  "address": "天河区"  
 },   
{ 
 "id": 2,     
 "name": "rose",     
 "age": 19,     
 "gender": "女",     
 "zhuanye": "大数据",     
 "address": "黄埔区"  
 },   
{    
 "id": 3,    
 "name": "jerry",    
 "age": 20,    
 "gender": "男",    
 "zhuanye": "python",    
 "address": "越秀区"  
 },  
 {     
  "id": 4,     
  "name": "jodan",     
  "age": 21,     
  "gender": "男",     
  "zhuanye": "java",     
  "address": "白云区" 
  } ]

AJAX的具体实现，也是比较简单的，它依赖于一个内置对象XMLHttpRequest，此对象是现代

浏览器都支持的对象。使用此对象再加上HTTP协议就可以完美的来实现一个AJAX请求过程。

原生的AJAX请求共分成五步，代码如下：

 <script>     
// 1. 创建异步对象     
var xhr = new XMLHttpRequest() ​     
// 2. 设置请求行     
// open方法有三个参数，常用的是前两个     
// 第1个参数表示请求方式，一个是get 一个是post 当前以get为例来演示     
// 第2个参数表示请求的路径     
xhr.open('get','https://www.easy-mock.com/mock/5d62446e09c1067760274c0b/example/getStuInfo') ​     
// 3. 设置请求头 get请求可以省略 ​     // 4. 设置请求体     
xhr.send(null) // 由于不需要向服务器端发送数据,因此参数是null ​     
// 5. 监视异步对象的状态变化     xhr.onreadystatechange = function () {       
    if(xhr.status==200&&xhr.readyState==4){         
        console.log(xhr.responseText);       
    }     
}   
</script>

此时在控制台中打印输出的数据为：


这样的数据格式是一个字符串的数据，使用起来不是太方便，因为应该将这样的字符串转换成

json对象，转换的方法是：

使用JSON.parse()将浏览器接收到服务器响应回来的string类型的数据转换成JSON对象：如下

 var obj = JSON.parse(xhr.responseText)

此时在控制台打印的话，会发现格式已经变成了对象了：


当我们拿到这样的JSON数据之后，就可以进行后续的业务处理了，比如生成页面结构等...

至此，我们就介绍完了原生js中的AJAX中的使用场景，作用，以及简单实现的过程，相信通过

大家亲自编写代码，又会有一个新技能的提升，这节课就到这里，我们下次再见。


avatar
文章
阅读
粉丝