Ajax—01—技术介绍；使用；

---

一、Ajax介绍

在学习了前面知识内容后，我们已经可以说非常灵活的处理浏览器发起的请求了。还有一门非常重要的技术，也就是 Ajax 需要我们来掌握。

 

Asynchronous Javascript And XML

 

我们首先要明确一个概念——当前请求页
当前请求页并不一定指浏览器的标签页，可能是标签页的单独区域。如果单个区域发起了请求，那么这个请求也可以成为“当前请求页”

 

（1）问题：

目前浏览器向服务器发起请求的方式有 form 标签、超链接、还有脚本语言(js\jquery)中的window.location.href 方式和表单提交函数这几种。但是不管哪种提交方式，浏览器都会将接收到的响应内容覆盖在请求网页中显示，但是怎么在保留请求网页内容的基础显示新的内容呢？

（2）解决：

使用 Ajax 技术；

Ajax对象引擎发送、接收信息就不会覆盖；

（3）使用:

 

 

 

二、Ajax使用

前台:

//1.创建ajax核心对象—— XMLHttpRequest 对象
var xhr = new XMLHttpRequest();

//2.给定请求方式以及请求地址
xhr.open("get","http://www.example.com");

//3.发送请求
xhr.send();

//4.获取服务器端给客户端的响应数据
//由于每当状态码readyState 改变时，就会触发 onreadystatechange 事件，因此需要让xhr的onreadystatechange属性引用一个函数地址，
//函数里我们规定当服务器已响应时所执行的任务。
xhr.onreadystatechange = function(){ 
　　//状态码为0说明open()没有被调用
　　//状态码为1说明open()正在被调用 
　　//状态为2:send()正在被调用 
　　//状态码3:服务端正在返回结果
　　//状态码4:请求结束，并且服务端已经结束发送数据到客户端 ，可以通过xhr.responseText来获取数据
　　if(xhr.readyState == 4 && xhr.status == 200){      
　　　　document.getElementById("span").innerHTML=xhr.responseText; 
　　　　alert(xhr.responseText); } 
}

后台:

目前返回了一个字符串，以后可能会返回一个json串

 

 

 

1. Ajax 状态码——readystate的值：

• 0：表示ajax引擎对象创建；
• 1：表示请求创建，但是还未发送；相当于执行到了ajax.open("get","my")这句代码，但还未执行到ajax.send()这句代码
• 2：表示请求已经发送了；相当于执行到了ajax.send（）这句代码；
• 3：表示服务器已经将请求处理完毕，ajax对象正在接受响应内容；
• 4：表示响应内容接收完毕；

通过Ajax状态码，我们可以知道浏览器进行到哪一步了；

 

 

 

2. Ajax 的响应状态码：

• 200：表示一切正常
• 404：表示资源未找到
• 500：表示内部服务器出错了；（可能是servlet代码编写错误）

 

 

 

3. Ajax 的异步和同步

Ajax 的请求：

• Get 请求方式
• Post 请求方式

Ajax 的响应：

• 普通文本
• JSON 数据格式

Ajax 的封装

• Ajax 完成三级联动
• jquery 中的 ajax
• ajax 完成搜索框关键字提示语

 

 

三、原理

ajax的基本原理

• 通过html的某个事件，调用js的某个函数，在js的函数里写ajax如何写？
• new以后ajax的核心对象xmlhttprequest
• send方法
• 把接受服务器返回数据的函数赋给xhr的某个属性，通过调用这个属性回调这个函数，然后做逻辑判断
• 在函数里把服务器返回的属性写入html

 

和以前前后端交互方式的区别：

一个是控制单元使用请求转发或重定向
一个是控制单元使用流并发送给ajax

以前我们是通过控制单元的逻辑判断进行请求转发或者重定向，由于请求转发和重定向是发送给浏览器渲染的，所以会实现整个页面的刷新。
现在我们的控制单元逻辑判断后，把结果当做一个流推出给ajax，ajax实现整个页面的局部页面的刷新。