前端设计-Ajax技术及实例展示

jax指的是异步JavaScript和XML，是一套综合了多项技术的浏览器端网页开发技术。也是目前网页前端设计较为流行使用的技术。Ajax能够真正实现网页前端与业务后台的分离，体现出网页设计大前端的设计思想。所有的前端设计只需要通过Ajax将消息传递给业务逻辑，运算完直接发送前端。其实现原理如下：

工作原理及过程

一般情况下，在处理具体业务是网页通常采用发送HTTP请求中带有参数形式传递命令与数据，处理页面接收到数据之后进行处理。这种情况需要页面跳转或者页面刷新，增加了服务器与客户端通信的开销。而使用Ajax技术进行业务处理时只需要通过Ajax与Json实现在不刷新页面前提下完成业务功能，在满足前后端分离的基础上进一步降低网络通信量。本文针对初学者以实例形式对Ajax应用进行说明，希望对初学者有所帮助。

设计案例

案例描述：前端为用户信息查询页面login.html,提供文本框用于接收用户姓名，业务逻辑处理页面为query.php,模拟接收用户姓名，执行查询，返回用户基本信息，前端login.html通过Ajax回调函数读取信息并以table形式进行输出显示。其前端页面设计如下：

前端测试页面

基本语法

(1) XMLHttpRequest对象

XMLHttpRequest是 AJAX 的基础。用于向服务器发送request请求实现数据交换。由于是对象XMLHttpRequest在使用的时候需要用new进行对象的实例化。如：var xmlhttp = new XMLHttpRequest();

(2) 发送请求open()与send()

通过使用open与send方法将客户端Ajax请求发送到服务器端，其中open请求带有请求类型等参数，send可以带传递的参数值。两函数基本语法如下：

open(method,url,async)//方法、处理URL，异步/同步
send(string)//post类型时传递参数

(3) onreadystatechange 事件

通过使用该事件用于响应服务器端状态的改变，readyState与status，其中readyState=4表示服务器请求已完成，响应已就绪。status=200表示已就绪。因此可以在该事件响应函数中去接收服务端传递数据。

(4) 服务器返回值类型responseText与responseXML,其中responseText表示接收服务器发送过来的字符串。

案例实现

（1）获取表单用户名值 var uname=document.getElementById('name').value;

（2）发送Ajax POST请求

Ajax Post请求

（3）（服务器请求处理）业务逻辑处理

php处理业务逻辑

（4）前端获取服务器值并输出显示表格

前端显示服务器发送数据（在不刷新页面情况下）

以上给出使用JavaScript原生态Ajax进行服务器与客户端浏览器进行数据交互的简单例题，重点为XMLHttpRequest对象的使用，业务逻辑处理使用了PHP。整体实现效果GIF动图描述如下：

Ajax实现效果

本头条号长期关注编程资讯分享；编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码错误、建议与意见，可以联系作者，共同探讨。期待大家关注！如需案例完整代码请关注并私信，往期前端设计文章链接如下：

前端设计-响应式页面开发基础
Web开发前端、后端与全栈的区别是什么？

jax学习

大家应该都知道mysql数据库，服务器是一台机器，他的的作用就是用来存储各种数据资源，而数据库存在的意义就是帮助服务器更好得打理数据！

比如，我们的页面上有一个按钮，用户点了一下这个按钮，页面就可以通过万维网来与目标地址进行数据交互！我们的页面就会发送一个网络请求过去，目标地址的服务器就会接受到这个请求，服务器已经封装好了一些后端代码，这个后端代码时刻运行在服务器上，后端代码就会做一些处理！去数据库中帮我们把数据取出来，再拿到这个数据，再通过网络请求把这个数据返回给我们的页面，于是我们的页面就可以拿到这一段数据，把数据展示在页面上，当然，这其中有很多细节我们没有聊到，大概是这样一个过程！那么，这个请求该怎么发出去呢？

这就是我们今天要学的Ajax

一、Ajax基础介绍

Ajax（Async JavaScript And XML）即异步 JavaScript 和 XML，是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，更新网页的某部分内容。

Ajax 主要包括以下几个部分：

JavaScript：用于实现客户端的逻辑和与服务器的交互。
XMLHttpRequest：这是 JavaScript 提供的一个对象，用于向服务器发送请求和接收响应。
服务器端脚本：通常使用服务器端语言（如 PHP、Python、Ruby 等）来处理请求并生成响应。
数据格式：Ajax 通信中常用的数据格式包括 XML 和 JSON。

使用 Ajax 技术，可以在不刷新页面的情况下，向服务器请求数据、更新网页内容、验证用户输入等。

二、Ajax实现

今天我们就拿到大佬的网易云音乐API （node）:网易云音乐 NodeJS 版 API (neteasecloudmusicapi.js.org)

**API：**应用程序编程接口。它是一组预定义的函数、方法、属性或类，用于与 JavaScript 引擎或其他 JavaScript 库进行交互。

我们在github拿到这一段后端代码之后，我们把它运行在自己的电脑上！这样我们就有了一个后端代码!

地址为：http://localhost:3000

这里我们为大家推荐一个插件：JSONVue

这个插件可以帮助我们处理这种情况：比如我们直接通过浏览器访问接口数据，看到的数据是乱的，我们就可以通过这个插件让我们的数据看起来更舒服！

比如我们拿到这个接口当中的

新歌速递

接口地址 : /top/song

调用例子 : /top/song?type=96

我们在浏览器中输入：localhost:3000/top/song?type=96

我们能看到这样一个页面就说明后台启动成功了！

接下来我们就使用一下Ajax

案例一：Ajax基本知识点-新歌速递

<body>
<button id="btn">新歌速递</button>
<ul id="ul">
</ul>
<script>
const btn = document.getElementById("btn");
btn.addEventListener("click",()=>{
//创建实例
let xhr = new XMLHttpRequest();
//准备阶段
xhr.open('GET','http://localhost:3000/top/song?type=7',true);
// 接收服务器返回的数据
xhr.onreadystatechange=()=>{
if(xhr.readyState===4&&xhr.status===200){
console.log(JSON.parse(xhr.responseText));
let result = JSON.parse(xhr.responseText);
result.data.forEach((item)=>{
let li = document.createElement("li");
li.innerHTML = item.name;
document.getElementById("ul").appendChild(li);
})
}
}
// 发送请求
xhr.send();
  
})
</script>
</body>

这就是我们一个案例我们来为大家逐条分析一下！

我们要实现的效果是：通过这个新歌速递的按钮，点一下，就可以拿到后端的数据并且展示在页面上。

这里我们为这个按钮添加一个点击事件,通过传统的js语法

const btn = document.getElementById("btn");
btn.addEventListener("click",()=>{}

接下来就开始我们的AJax操作了

let xhr = new XMLHttpRequest();

这是js封装好的用于发送http请求的类,用这个类发送http请求，就相当于用浏览器发http请求，xhr就是我们拿到一个实例对象！

xhr.open('GET','http://localhost:3000/top/song?type=7',true);

open方法用来做请求的准备工作！

第一个参数为请求的类型,'GET'是一种请求类型，这是常见的一种请求方式，请求方式有很多种：POST PUT DELETE 等等，用的最多是GET 和 POST

ajax请求的方式有以下几种：

GET：向服务器请求获取数据，通常用于请求静态资源。
POST：向服务器提交数据，通常用于提交表单数据或上传文件。
PUT：向服务器更新数据，通常用于更新资源的全部内容。
DELETE：向服务器删除数据，通常用于删除资源。
HEAD：向服务器请求获取资源的头部信息，通常用于检查资源是否存在或检查资源的更新时间等。
OPTIONS：向服务器请求获取可用的请求方法，通常用于跨域请求或预检请求。

第二个参数就是我们的接口地址了！这里我们用的是'http://localhost:3000/top/song?type=7'

第三个参数是一个布尔值 ture||false 表示是否异步请求 (一般我们用异步,使用同步的话假如遇到网络情况不好的时候，会阻塞后面代码的运行！)

xhr.send();

用于发送网络请求

xhr.onreadystatechange=()=>{
if(xhr.readyState===4&&xhr.status===200){
console.log(JSON.parse(xhr.responseText));
let result = JSON.parse(xhr.responseText);
result.data.forEach((item)=>{
let li = document.createElement("li");
li.innerHTML = item.name;
document.getElementById("ul").appendChild(li);
})
}
}

这里负责接收服务器返回的数据！并且把数据展示在页面上！

if(xhr.readyState===4&&xhr.status===200){}

一般我们要加上这样一个判断条件，其中readyState 4 表示请求已经完成，status 200 表示请求成功

readyState表示的是Ajax的状态

0 -- xhr刚刚创建，请求还没发
1 -- open准备完成
2 -- 请求已经发送，客户端接收到了响应头
3 -- 接收到服务器返回的响应体（数据包），正在解析
4 -- 解析完成

status表示的是http的状态码,下面是一些常见的状态码:

200 OK：请求成功，服务器成功返回了请求的资源。
301 Moved Permanently：永久重定向，请求的资源已永久移动到新的位置。
302 Found：临时重定向，请求的资源临时移动到新的位置。
400 Bad Request：客户端请求有错误，服务器无法理解请求。
401 Unauthorized：请求未经授权，客户端需要进行身份验证。
403 Forbidden：服务器拒绝了请求，客户端没有权限访问该资源。
404 Not Found：服务器找不到请求的资源。
500 Internal Server Error：服务器内部发生错误，无法完成请求。
502 Bad Gateway：代理服务器从上游服务器收到了无效的响应。
503 Service Unavailable：服务器当前无法处理请求，可能是因为维护或过载。

console.log(JSON.parse(xhr.responseText));

responseText 就是后台的数据返回的数据是一个JSON 字符串我们要处理一下数据，将数据转换为对象JSON.parse(xhr.responseText)把字符串转为对象。

let result = JSON.parse(xhr.responseText);

使用result存储转为对象后的数据.

result.data.forEach((item)=>{
let li = document.createElement("li");
li.innerHTML = item.name;
document.getElementById("ul").appendChild(li);
})

使用js中的forEach将数据中的歌曲名称展示在页面上！我们来看看效果！

案例二、Jquery接口封装 -新歌速递

我们在上述案例的基础上，转换为jquery的封装

推荐一个网站：BootCDN前端工具网站BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

jquery引入（script）:<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>

<body>
<button id="btn">新歌速递</button>
<ul id="ul">
</ul>
<!-- jquery 的引入-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script>
const btn = document.getElementById("btn");
btn.addEventListener("click",()=>{
// jquery的语法 异步代码
$.ajax({
url:'http://localhost:3000/top/song?type=7',
method:'GET',
dataType: 'json',
success:function(data){
// success回调 拿到数据响应的时候操作
// 要放在里面，因为请求是异步的，我们要拿到数据之后，才能操作数据
console.log(data);
}
})
  
})
</script>
</body>

这里我们使用的是jquery封装接口来进行与后端的数据交互

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>

这里是jquery的引入！当然方式不止这一种，还有很多种方式，我们只是拿到其中的一种而已，接下来我们就在在按钮的点击事件中直接使用jquery的语法

// jquery的语法 异步代码
$.ajax(
{
url:'http://localhost:3000/top/song?type=7',
method:'GET',
dataType: 'json',
success:function(data){
// success回调 拿到数据响应的时候操作
// 要放在里面，因为请求是异步的，我们要拿到数据之后，才能操作数据
console.log(data);
}
})

我们可以直接使用$.ajax对ajax进行封装，在$.ajax()的括号中加入一个对象{}

{
url:'http://localhost:3000/top/song?type=7',
method:'GET',
dataType: 'json',
success:function(data){
console.log(data);
}
}

其中

url:是接口的地址，method:是请求的类型，dataType:告诉后端数据返回的类型

success:success回调,是拿到数据后，我们要进行的操作！要放在这个对象里面，因为请求是异步的，我们要拿到数据之后，才能操作数据。

我们来看看打印

案例三、fetch()原生js自带的方法-新歌速递

你可以在MDN前端字典网站中找到它！MDN Web Docs (mozilla.org)

<body>
<button id="btn">新歌速递</button>
<ul id="ul">
</ul>
<!-- jquery 的引入-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script>
const btn = document.getElementById("btn");
btn.addEventListener("click",()=>{
// 说明fetch是一个异步函数,会返回一个new promise 并且会把后端返回的数据通过resolve抛出这个数据
fetch("http://localhost:3000/top/song?type=7")
.then(data=>{
// data是整个响应体 data可以调用json()方法 得到一个promise对象
return data.json();
})
.then((res)=>{
console.log(res);
})
})
</script>
</body>

这里还是通过点击事件

fetch("http://localhost:3000/top/song?type=7")

这是官方的fetch方法，其中带一个形参,接收的就是你的接口地址！

并且，在后面可以接.then()，这说明fetch是一个异步函数，并且会返回一个new promise对象，（返回了new promise才能接.then），并且会把后端返回的数据通过resolve抛出这个数据！

then(data=>{
// data是整个响应体 data可以调用json()方法 得到一个promise对象
return data.json();
})

这是第一个.then，在这里我们拿到的data是整个响应体，我们可以返回data.json()之后再接.then，注意这里.json是这个请求体能调用的方法,能得到一个promise对象

.then((res)=>{
console.log(res);
})

这里是第二个.then这里我们就能拿到请求体抛出的数据了！接收一个形参res这个就是我们拿到的数据!

我们来看看打印的结果！

最后

各位老铁都看到这里了！coding不易，给我点上一个小小的赞吧！

后续我还会大家持续输出vue3，Element-ui以及相关后端的文章！让我们一起跨步向前！

那么，我们今天就到这啦！

作者：Aidan路修远i
链接：https://juejin.cn/post/7325724706140225577

习大纲

基础学习路径

1.什么是AJAX

1.1概念

AJAX是Asynchronous javascript and xml 的缩写，表示异步javascript 和 xml ,是一种交互式网页应用开发技术。

AJAX是一些老技术的新应用，应用到了html css javascript dom , 以XMLHttpRequest为技术核心实现网页异步数据传输。

1.2特点

最大特点就是：网页不用刷新进行数据传输

1.3应用场景

用户注册

AJAX分页效果

图片加载瀑布流效果

2.AJAX工作流程

传统的数据提交方式

AJAX数据提交方式

通过上述对比，客户端用户部分减少了2个流程，交给了ajax去处理，那么就减少了用户的等待时间，用户体验大大的提升

3.AJAX的优点

 减少服务器带宽，按需获得数据

注意：在一些有列表展示功能的地方优势特别突出

 无刷新更新页面，减少用户的实际和心理等待时间

注：用户注册，用户登录。多数据信息的展示

 更好的用户体验，传统数据提交会刷新页面，易丢失用户填写数据

 主浏览器都支持

二、AJAX使用

1.创建ajax对象

XHR = new XMLHttpRequest();

2.建立链接

1.1语法

创建请求头使用OPEN,主要实现（请求类型，请求地址）

对象.open(请求类型GET/POST,请求地址,[同步true/异步false]);

默认：同步 True

1.2代码

//创建AJAX对象
   var XHRObj = new XMLHttpRequest();
   //创建请求头
   XHRObj.open('GET','demo.php');

3.发送请求

1.1语法

主要实现请求服务器操作

对象.send(POST请求则填写POST的数据/GET请求可以不用写);

1.2代码

【HTML代码】
<script type="text/javascript">
   //创建AJAX对象
   var XHRObj = new XMLHttpRequest();
   //创建请求头
   XHRObj.open('GET','demo.php');
   //发送请求  对象.send(POST请求则填写POST的数据/GET请求可以不用写);
   XHRObj.send();
   
</script>
【PHP代码】
<?php
echo 'test';

脚下留心：

一定要在服务器目录下面运行AJAX-发送请求.html,不能直接用浏览器浏览该文件

4.响应请求（接受服务器返回的信息）

1.1语法

对象.responseText (获取服务器响应的字符串数据)

对象.responseXML(获取服务器响应的xml数据)

1.2代码

<script type="text/javascript">
   //创建AJAX对象
   var XHRObj = new XMLHttpRequest();
   //创建请求头
   XHRObj.open('GET','demo.php');
   //发送请求  对象.send(POST请求则填写POST的数据/GET请求可以不用写);
   
   XHRObj.send();
   //alert返回的数据
   alert(XHRObj.responseText);
   
</script>

案例运行结果

脚下留心：无法响应数据

原因：在AJAX没有完成请求这个时候是没有返回值的，所以获取数据是没有结果的。

解决方法：通过判断reaystate == 4 是否AJAX请求完成

1.3判断服务器是否响应成功

Onreadystatechange 作用：ajax在请求的过程中发生任何状态的变化都会调用该方法

Readystate 作用：返回ajax的请求状态

状态说明：

最终代码：以及结果

思考：为什么没有打印0~4

<script type="text/javascript">
   //创建AJAX对象
   var XHRObj = new XMLHttpRequest();
   //创建请求头
   XHRObj.open('GET','demo.php');
   //发送请求  对象.send(POST请求则填写POST的数据/GET请求可以不用写);
   console.log(XHRObj.readyState);
   //发送请求
   XHRObj.send();
   //当请求状态发送变化时ajax会自动调用该方法onreadystatechange
   XHRObj.onreadystatechange=function(){
       console.log(XHRObj.readyState);
       if(XHRObj.readyState==4){
            console.log(XHRObj.responseText);
       }
       
   }
   console.log(XHRObj.readyState+'sdf');  
</script>

说明：

程序是从上往下进行的，里面的代码是等发送异步请求完了才去执行的。

状态0是无法获取的，因为实例化AJAX的对象，然而监听需要对象对象里面的属性来完成，所以0装就是实例化对象的时候。

思考：避免接口写错

例如：

在实际使用中，我们为了只有在请求的接口正确的时候获取相应的数据，一般我们要判断返回的HTTP状态是否正确，

使用：

对象.status == 200

<script type="text/javascript">
   //创建AJAX对象
   var XHRObj = new XMLHttpRequest();
   //创建请求头
   XHRObj.open('GET','demo1.php');
   //发送请求  对象.send(POST请求则填写POST的数据/GET请求可以不用写);
//    console.log(XHRObj.readyState);
   //发送请求
   XHRObj.send();
   //当请求状态发送变化时ajax会自动调用该方法onreadystatechange
   XHRObj.onreadystatechange=function(){
//        console.log(XHRObj.readyState);
       if(XHRObj.readyState == 4 && XHRObj.status == 200){
            console.log(XHRObj.responseText);
       }
//        else{
//            //以邮件或者短信的形式发送通网站管理员
//            alert('服务器错误，很忙......');
//        }
       
   }
   
//    console.log(XHRObj.readyState+'sdf');
</script>

5.案例联系-检查用户名是否存在

1.1案例需求

判断用户名admin是否存在，当存在的时候返回【不可用】，当不存在的时候返回【可用】

1.2完成思路

明确需求：

第一步：给按钮增加点击事件

第二步：获取用户输入的值username

第三步：使用AJAX将内容发送给服务器端PHP文件

第四步：编写PHP文件checkuser.php 判断用户是否存在，返回结果

第五步：将PHP返回的结果弹出来

1.3HTML代码

<!--

第一步：给按钮增加点击事件

第二步：获取用户输入的值username

第三步：使用AJAX将内容发送给服务器端PHP文件

第四步：编写PHP文件checkuser.php 接受参数，并且判断用户是否存在，返回结果

第五步：将PHP返回的结果弹出来

-->

<script type="text/javascript">
   //按钮绑定事件，给input增加ID属性
  var checkObj = document.getElementById('check');
  checkObj.onclick = function(){
      var username = document.getElementById('username').value;
      //创建ajax对象
      var XHRObj = new XMLHttpRequest();
      //创建请求头，设置请求发送的地址和类型，并且将参数传递给服务端
      XHRObj.open('get','check.php?username='+username);
      //获取服务器端返回的数据  
      XHRObj.onreadystatechange = function(){
          if(XHRObj.readyState == 4 && XHRObj.status == 200){
              alert(XHRObj.responseText);
          }
      }
      //发送请求
      XHRObj.send();
     
  }
   
</script>

1.4PHP代码

<?php
//定义一个用户数组
$user = array('admin','xiaoming','xiaohong','xiaoqiang');
//获取传递的参数
$username = $_GET['username'];
//判断用户是否存在在数组中
if(in_array($username,$user)){
   echo '不可用';
}else{
   echo '可用';
}

进化版本

1)进化要求

当用户名可用的时候后面增加√说可用，当用户名不可用的时候出现一个×提示当前用户名太火，请换一个

HTML代码

<style>
   .error{
       color: red;
       font-size: 14px;
   }
   .green{
       color: green;
       font-size: 14px;
   }
   
</style>
<body>
<!--   <span class="error">×此用户名太首欢迎，请换一个</span>-->
<!--   <span class="green">√恭喜你，该用户可用</span>-->
   <table border="1">
       <th colspan="2">用户注册</th>
       <tr>
           <td><input id="username" name="username" type="text"/><div id='error'></div></td>
           <td><input id="check" type="button" value="检测用户"/></td>
       </tr>
       
   </table>
</body>
<!--
第一步：给按钮增加点击事件
第二步：获取用户输入的值username
第三步：使用AJAX将内容发送给服务器端PHP文件
第四步：编写PHP文件checkuser.php 接受参数，并且判断用户是否存在，返回结果
第五步：将PHP返回的结果弹出来
-->
<script type="text/javascript">
   //按钮绑定事件，给input增加ID属性
  var checkObj = document.getElementById('check');
  checkObj.onclick = function(){
      var username = document.getElementById('username').value;
      //创建ajax对象
      var XHRObj = new XMLHttpRequest();
      //创建请求头，设置请求发送的地址和类型，并且将参数传递给服务端
      XHRObj.open('get','check.php?username='+username);
      //获取服务器端返回的数据  
      XHRObj.onreadystatechange = function(){
          if(XHRObj.readyState == 4 && XHRObj.status == 200){
//               alert(XHRObj.responseText);
              if(XHRObj.responseText =='可用'){
                   document.getElementById('error').innerHTML='<span class="green">√恭喜你，该用户没有被注册</span>';
              }else{
                  document.getElementById('error').innerHTML=' <span class="error">×此用户名太首欢迎，请换一个</span>';
                 
              }
          }
      }
      //发送请求
      XHRObj.send();
     
  }
   
</script>

三、发送GET/POST请求

1.POST和GET的区别

数据方面：GET受浏览器的影响

POST 原则上是不受限制的，可以通过PHP配置POST_MAX_SIZE进行更改

安全方面：POST比GET要安全

文件上传：GET不能进行文件上传

2.Ajax之GET请求（加参数）

1.1实现方式

说明：在请求地址后面增加参数,例如：demo.php?a=111&b=222&c=333

1.2代码

【HTML代码】
<script type="text/javascript">
   //创建AJAX对象
   var XHRObj = new XMLHttpRequest();
   //创建请求头，请求方式，请求链接
   XHRObj.open('get','test.php?a=111&b=222&c=333');
   //发送请求
   XHRObj.send();
</script>
【PHP代码】
<?php
var_dump($_GET);

3.AJAX之POST请求

1.1实现方式

Open(‘POST’,请求地址);

设置发送的数据格式，采用URL编码格式

对象.setRequestHeader(‘content-type’,’application/x-www-form-urlencoded’);

对象.send(发送的数据);

1.2代码

<script type="text/javascript">
   //创建AJAX对象
   var XHRObj = new XMLHttpRequest();
   XHRObj.onreadystatechange = function() {
   if (XHRObj.readyState == 4) {
     alert(XHRObj.responseText);
   }
 }
   //创建请求头，请求方式，请求链接
   XHRObj.open('post','test.php');
   //发送post的数据
   var postData = 'name=123123&age=rrr';
   
   //设置数据编码格式,使用URL编码格式
   XHRObj.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
   
   //发送请求
   XHRObj.send(postData);
</script>

【PHP代码】

<?php

var_dump($_POST);

效果

4.练习：表单无刷新数据录入

四、AJAX同步异步请求

1.概念

同步：等待服务器响应完成在执行下一段JS代码（阻塞模式）

异步：不等服务器响应完成直接执行下一段JS代码（非阻塞模式）

2.验证同步

设置open(方式，请求地址,false/同步);

HTML【代码】

<script type="text/javascript">
   //创建AJAX对象
   var XHRObj = new XMLHttpRequest();
   //创建请求头
   XHRObj.open('GET','demo.php',false);
   //时时监控
   XHRObj.onreadystatechange = function(){
       if(XHRObj.readyState == 4){
           console.log('111');
       }
   }
   //发送请求  对象.send(POST请求则填写POST的数据/GET请求可以不用写);
   XHRObj.send();
   console.log('js执行完成');
   
</script>

【PHP代码】

为了增加延迟效果使用sleep

<?php
sleep(8);
echo 'test';

3.验证异步

【HTML代码】
<script type="text/javascript">
   //创建AJAX对象
   var XHRObj = new XMLHttpRequest();
   //创建请求头
   XHRObj.open('GET','demo.php');
   //时时监控
   XHRObj.onreadystatechange = function(){
       if(XHRObj.readyState == 4){
           console.log('111');
       }
   }
   //发送请求  对象.send(POST请求则填写POST的数据/GET请求可以不用写);
   XHRObj.send();
   console.log('js执行完成');
   
</script>

【PHP代码】

<?php
sleep(8);
echo 'test';

五、解决缓存问题

1.缓存分析

我们再浏览一些网站的时候浏览器为了方便用户再次访问的时候增加用户访问体验会将一些静态资源文件缓存到本地

缓存的位置在：

选中IE浏览器右键

打开

静态缓存目录就出现再这里面了

说明：IE存在缓存

2.解决方案

1.1随机数

代码设置：?t=Math.random()

缺点：

1.不能保证URL绝对唯一

2.产生大量缓存文件

1.2时间

代码设置：?t=new Date().getTime(); //取得毫秒时间戳

优点：保证URL绝对唯一

缺点：依然产生大量缓存文件

1.3设置请求头

代码设置：对象.setRequestHeader("If-Modified-Since","0");

原理分析：

If-Modified-Since是标准的HTTP请求头标签，在发送HTTP请求时，把浏览器端缓存页面的最后修改时间一起发到服务器去，服务器会把这个时间与服务器上实际文件的最后修改时间进行比较。

如果时间一致，那么返回HTTP状态码304（不返回文件内容），客户端接到之后，就直接把本地缓存文件显示到浏览器中。

如果时间不一致，就返回HTTP状态码200和新的文件内容，客户端接到之后，会丢弃旧文件，把新文件缓存起来，并显示到浏览器中。

1.4设置相应头

代码设置：header("Cache-Control: no-cache, must-revalidate");

原理分析：

利用php的header函数向响应头中写数据，写的是告诉客户端：不要对本次的结果进行缓存。

这种做法，可以从根本上解决缓存问题，不产生任何缓存文件。

六、返回数据格式

1.数据格式分类

普通字符串文本格式：responseText

XML数据格式:responseXML

JSON 字符串数据格式：responseText (在实际工作中用到最多，最广泛的格式)

2.返回Text数据处理

1.1HTML代码

<script type="text/javascript">
   //创建AJAX对象
   var XHRObj = new XMLHttpRequest();
   //创建请求头
   XHRObj.open('GET','text.php');
   //时时监控
   XHRObj.onreadystatechange = function(){
       if(XHRObj.readyState == 4 && XHRObj.status == 200){
           document.getElementById('content').innerHTML=XHRObj.responseText;
       }
   }
   //发送请求  对象.send(POST请求则填写POST的数据/GET请求可以不用写);
   XHRObj.send();
   
</script>
<body>
   <div id="content"></div>
</body>

1.2PHP代码

<?php

echo '<h1>返回的文本</h1>';

最终效果

3.返回XML数据处理

1.1HTML代码

<script type="text/javascript">
   //创建AJAX对象
   var XHRObj = new XMLHttpRequest();
   //创建请求头
   XHRObj.open('GET','xml.php');
   //时时监控
   XHRObj.onreadystatechange = function(){
       if(XHRObj.readyState == 4 && XHRObj.status == 200){
          var xmlObj = XHRObj.responseXML;
           //以前获取html文档我们使用  document.getElementByTagName()
           books = xmlObj.getElementsByTagName('book');
           for(i=0;i<books.length;i++){
//获取第二级的值我们使用childen 方法
               for(j=0;j<books[i].children.length;j++){
                   
                   console.log(books[i].children[j].innerHTML);
               }
           }
       }
   }
   //发送请求  对象.send(POST请求则填写POST的数据/GET请求可以不用写);
   XHRObj.send();
   
   
</script>

1.2PHP代码

首先确保PHP写的xml文件能再浏览器端访问

<?php
header('Content-Type:text/xml; charset=utf-8');
echo '<?xml version="1.0" encoding="utf-8"?>
<books>
   <book>
       <name>西游记</name>
       <price>50.12</price>
   </book>
   
   <book>
       <name>三国演义</name>
       <price>876.12</price>
   </book>
   
</books>
';

4.返回JSON数据处理

1.1什么是JSON数据

JSON(javascript Object Notation js 对象标记) 是一种轻量级的数据交换格式。

1.2JSON数据优势

数据格式比较简单，易于读写，格式都是压缩的，占用带宽小

易于解析这种语言，客户端JavaScript可以简单的通过eval()进行JSON数据的读取

因为JSON格式能够直接为服务器端代码使用, 大大简化了服务器端和客户端的代码开发量, 但是完成的任务不变, 且易于维护

1.3服务器端JSON生成和解析

PHP端生成JSON数据使用：json_encode(数组数据格式);

PHP端解析JSON数据使用：json_decode(待解码数据，true/false);

说明：false 解码出来的数据是一个对象，true,解码出来的是一个数组

1.4客户端解析JSON数据

由于我们返回值的处理使用的是responseText 格式

 JSON.parse()

语法格式：JSON.parse(字符串);

作用：从一个字符串中解析出json数据对象

前提：字符串必须是json格式的字符串

 Eval

七、综合案例-用户注册

1.需求

用户会员注册功能，用户填写好根据规则进行验证，如果验证成功提示用户注册成功。

验证规则：

1.用户名不能为空

2.用户名必须是由数字和字母组成，而且是在6~8位之间

2.HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
   <title>AJAX-用户注册</title>
</head>
<style>
   dd{float: left;}    
</style>
<body>
  <div>
      <dl>
          <dd>用户名</dd>
          <dd><input type="text" name="username" id="username"></dd>
          <dd><input type="button" id="regbtn"  value="注册"></dd>
      </dl>
  </div>
   
</body>
<script type="text/javascript">
   
   //给注册按钮增加click事件
   
   var regbtn = document.getElementById('regbtn');
   
   regbtn.onclick = function(){
       
       //获取用户输入的值
       var username = document.getElementById('username').value;
       
        //创建AJAX对象
       var XHRObj = new XMLHttpRequest();
       //打开对象
       XHRObj.open('get','reg.php?username='+username);
       //实时监控AJAX运行状态
       XHRObj.onreadystatechange = function(){
           //判断服务器是否响应成功
           if(XHRObj.readyState==4 && XHRObj.status == 200){
               //将json数据转换成对象
               jsonObj = JSON.parse(XHRObj.responseText);
               //判断用户是否操作成功进行页面跳转
               if(jsonObj.state ==1){
                   location.href='success.html';
                   
               }else{
                   alert(jsonObj.msg);
               }
           }
       }
       //发送请求
       XHRObj.send();
       
   }
   
 
   
   
</script>
</html>

3.PHP代码

在线咨询

上一篇：HTML5实例002-1分钟用javascript实现倒计时效果
下一篇：快速将PPT转换为HTML（h5）

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

前端设计-Ajax技术及实例展示

设计案例

基本语法

案例实现

jax学习

一、Ajax基础介绍

二、Ajax实现

案例一：Ajax基本知识点-新歌速递

案例二、Jquery接口封装 -新歌速递

案例三、fetch()原生js自带的方法-新歌速递

最后

习大纲

1.什么是AJAX

1.1概念

1.2特点

1.3应用场景

2.AJAX工作流程

3.AJAX的优点

二、AJAX使用

1.创建ajax对象

2.建立链接

1.1语法

1.2代码

3.发送请求

1.1语法

1.2代码

4.响应请求（接受服务器返回的信息）

1.1语法

1.2代码

1.3判断服务器是否响应成功

5.案例联系-检查用户名是否存在

1.1案例需求

1.2完成思路

1.3HTML代码

1.4PHP代码

三、发送GET/POST请求

1.POST和GET的区别

2.Ajax之GET请求（加参数）

1.1实现方式

1.2代码

3.AJAX之POST请求

1.1实现方式

1.2代码

四、AJAX同步异步请求

1.概念

2.验证同步

3.验证异步

五、解决缓存问题

1.缓存分析

2.解决方案

1.1随机数

1.2时间

1.3设置请求头

1.4设置相应头

六、返回数据格式

1.数据格式分类

2.返回Text数据处理

1.1HTML代码

1.2PHP代码

3.返回XML数据处理

1.1HTML代码

4.返回JSON数据处理

1.1什么是JSON数据

1.2JSON数据优势

1.3服务器端JSON生成和解析

1.4客户端解析JSON数据

 JSON.parse()

 Eval

七、综合案例-用户注册

1.需求

2.HTML代码

3.PHP代码

您的项目需求