目录
一、为什么使用Ajax?
在没有使用Ajax之前，我们使用传统web技术时，每次客户端会同步发送请求,服务器都需要加载整个页面，直到请求完毕后才发出响应，如果页面内容量大，那加载页面的时间会留出空白，导致有很差的用户体验等等，所以Ajax在这个问题上进行了补充。
二、Ajax说明
概念
Ajax全称为 Asynchronous JavaScript and Xml,由JavaScript、CSS、XML等几种技术整合而成。
作用
Ajax实现了页面无刷新加载，在需要的时候可以只更新页面的一小部分内容，而不必重新生成整个页面。
三、Ajax的特点和优势
特点
- 语言： JavaScript是实现Ajax技术所使用的主要开发语言
- Ajax引擎: 即xmlHttpRequest核心对象，可以用异步的形式在浏览器和服务器之间传送数据。
- 数据格式: 传送数据时，有几种常用的数据格式，如: JSON,XML,HTML
优势
避免重复加载
提高了加载速度
优化了用户体验
四、异步和同步
1.同步发动请求
说起同步，我们的传统web就是同步发送请求，那么同步是什么呢？——浏览器发送了一个请求，服务器去处理请求时，必须要将请求处理完成后，才可以做出响应。
2.异步发送请求
JavaScript就是一个异步，而我们的Ajax就是基于JS去实现的，那么什么是异步呢?——浏览器发送了一个请求，服务器去处理请求，你去处理你的，我照样往下执行，等我要响应的时候，自然会把处理好的响应数据给到浏览器去局部更新页面，实现无刷新加载页面。
五、Ajax的工作流程
1.传统web执行方式
这里找不到流程图，所以我口说，哈哈哈。
传统web执行方式: 当浏览器发送请求后，比如说发送的资源是动态资源，也就是jsp等等，服务器接收请求并去处理，等待处理完成后服务器发出响应，浏览器接收并且显示。
2.Ajax执行方式
Ajax执行方式: 当用户界面触发某个事件后调用JavaScript,通过Ajax引擎即xmlHttpResquest核心对象发出异步请求，服务器接收并处理请求,服务器不会等待响应的数据，而是继续往下执行，当执行回调函数时，响应的数据会自动拿到，回调函数处理响应，并使用DOM+CSS技术利用返回的数据局部更新页面内容。
注意:服务器响应以XML、JSON或HTML格式返回数据或者普通文本。
五、Ajax的使用
1. XmlHttpRequest核心对象
概念
XmlHttpRequest对象是Ajax技术的核心，用于与服务器进行交互，它可以在不刷新当前页面的情况下向服务器发送特定的URL异步发送请求，获取数据，从而在当前页面中显示局部更新的效果。
语法
xmlHttpRequest=new XMLHttpRequest();
常用属性
| 属性名称 | 说明 |
| onreadystatechange | 设置回调函数，作为readyState属性值改变时的事件处理程序 |
| readyState | 返回请求的当前状态，取值从0到4变化。 0——未初始化 1——已初始化 2——请求发送完成 3——开始读取响应 4——读取响应结束 |
| status | 返回当前请求的Http状态码 常用值举例: 200——正确返回 404——找不到访问对象 |
| statusText | 返回当前请求的响应行状态 |
| responseText | 以文本形式获取响应值 |
| responseXML | 已XML形式获取响应值，并且解析成DOM对象返回 |
常用方法
| 方法 | 说明 |
| open(String method,String url,boolean async,String user,String password) | 创建一个新的HTTP请求。 method参数: 提交方式POST，GET等等,大小写不敏感 url: 请求的url async: 可选，指定此请求是否为异步方法，默认为true. user: 参数，可选,指定用户名 password: 可选,验证信息中的密码 |
| send(String data) | 发送请求到服务器端 data参数: 如果请求是get方式，可指定为null,否，是POST，需要指定参数 |
| abort() | 取消当前请求 |
| setRequestHeader(String header, String value) | 设置请求头信息 header参数: 指定的HTTP头部名称 value参数: 指定的HTTP头部名称对应的值 |
| getResponseHeader(String header) | 从响应中获取指定的HTTP头信息 |
| getAllReponseHeaders() | 获取响应的所有HTTP头信息 |
老版本IE兼容问题
在IE浏览器(IE5和IE6)中创建XmlHttpRequest的方式和现在的版本的方式不同，为了使程序兼容更好,语法如下:
xmlHttpRequest=new ActiveXObjext("Microsoft.XMLHTTP");
2.原生Ajax的创建及使用方式
以验证手机号是否已经注册为例
Html代码
<form action="#">
手机号: <input type="text" id="phone" name="phone" οnblur="checkPhone()"><span id="error"></span> <br>
<input type="submit" value="注册">
</form>
Ajax的创建及发送请求
/**
* 检验手机号是否已注册
*/
function checkPhone() {
//获取手机号
var phone = document.getElementById("phone").value;
//解决浏览器兼容问题
if (window.XMLHttpRequest) {
//创建Ajax核心对象
xmlHttpRequest = new XMLHttpRequest();
} else {
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
var url = "/demo/phoneServlet";
//创建回调函数
xmlHttpRequest.onreadystatechange = callback;
//创建异步请求
// xmlHttpRequest.open("GET",url,true);
xmlHttpRequest.open("POST",url,true);
//使用POST需设置请求头信息
xmlHttpRequest.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//发送请求
xmlHttpRequest.send("phone="+phone);
}
//回调函数 : 处理响应 显示DOM+CSS
function callback() {
if(xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200)
{
//接收响应文本数据
var data = xmlHttpRequest.responseText;
if (data == "true") {
document.getElementById("error").innerHTML = "手机号已被注册!";
document.getElementById("error").style.color = "red";
} else {
document.getElementById("error").innerHTML = "手机号可以注册";
document.getElementById("error").style.color = "green";
}
}
}3.使用JQuery简化Ajax技术的实现
(1) 为什么使用JQuery来简化Ajax?
在使用原生JavaScript实现了Ajax无刷新技术，实现过程很复杂，又要考虑浏览器兼容问题，所以使用JQuery会很简洁。
(2) 概念
JQuery将Ajax的操作都进行了封装，通过调用一个方法就可以完成发送请求和处理复杂格式的响应结果，简洁方便且结构清晰。
(3)核心方法——$.ajax()
$.ajax([settings]) //settings是ajax方法的参数,用于配置Ajax请求的键值对集合
(4)$.ajax()方法的常用配置参数
| 参数 | 类型 | 说明 |
| url | String | 请求的URL,默认为当前页的地址 |
| type | String | 请求方式: 如: get post 等等 |
| data | String,Array,或.. | 发送服务器端的数据，也就是参数 |
| dataType | String | 服务器返回的数据类型,有：XML,HTML,JSON,Text.. |
| sucess | Function(任意类型) | 请求成功后调用的函数 |
| error | Function(...) | 请求失败时调用的函数 |
| complete | Function(...) | 请求完成后调用的函数，相当于java异常中的finally |
(5)JQuery对Ajax进行封装的使用方式
function checkPhone()
{
$.ajax({
"url" : "/demo/phoneServlet",
"type": "POST",
"data": "phone="+$("#phone").val(),
"dataType": "text",
"success": callBack,
"error":function ()
{
alert("手机验证时出现错误，请稍后再试!");
}
});
//响应成功时的回调函数
function callBack(data) //参数表示响应结果
{
if(data=="true")
{
$("#error").html("手机号已被注册!");
$("#error").css("color","red");
}else
{
$("#error").html("手机号可以注册!");
$("#error").css("color","green");
}
}
}JQuery对Ajax的各种功能都进行了封装，调用$.ajax()就不需要像原生Ajax一样去写繁琐的open,send,以及请求的处理，他的处理信息都在$ajax(settings)的配置参数中,在这里$.ajax() 的数据是使用键值对的形式也就是JSON去传递数据的。
扫一扫
5400
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
