# Ajax异步刷新技术
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），
是指一种创建交互式网页应用的网页开发技术。
Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。
Ajax 是一种用于创建快速动态网页的技术。
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。
它是属于Web2.0的技术
# 主要特点：
无刷新：不刷新整个页面，只刷新局部
无刷新的好处，只更新部分页面，有效减少用户的带宽压力！
提供类似C/S的交互效果，操作更加方便！
# XMLHttpRequest对象
整个Ajax技术的核心
提供异步发送请求的能力
对象中常用的方法
| 方法 | 说明 |
|---|---|
| open(String method, String url boolean async,String user, String password) | 创建一个新的HTTP请求 |
| send(String data) | 发送请求到服务器端 |
| abort() | 取消当前请求 |
| setRequestHeader(String header, String value) | 设置请求的某个HTTP头信息 |
| getResponseHeader(String header) | 获取响应的指定HTTP头信息 |
| getAllResponseHeader() | 获取响应的所有HTTP头信息 |
# open(....);
创建一个新的HTTP请求
参数：
- method是请求模式：url是请求地址 async为boolean类型,是否用异步刷新技术
get/post1
# send(String data);
发送存在的请求到服务器端
参数是发送请求时可带的参数！
# Ajax事件
# onreadystatechange
回调函数
ajaxReq.onreadystatechange=callback;
function callback(){
//*****省略代码
}
2
3
4
5
# Ajax属性
# readyState
# status
不同的浏览器创建XMLHttpRequest对象的方法不一样。
# Ajax的实现步骤
function validate(){
var name = $("#name").val();
if(name == null || name == ""){
$("#nameDiv").html("用户名不能为空");
}else{
//进入后台判断用户是否存在
//1.获取XMLHttpRequest对象
var ajaxReq = getXMLHttpRequest();
//2.准备url
var url = "UserServlet?name="+name;
//3.创建一个新的请求
ajaxReq.open("get",url);
//4.数据的回调函数
ajaxReq.onreadystatechange=callback;
//5.发送该请求
ajaxReq.send(null);
//回调函数
function callback(){
if(ajaxReq.readyState == 4 && ajaxReq.status == 200){
var data = ajaxReq.responseText;
if(data = "true"){
$("#nameDiv").html("用户名已经存在！");
}else{
$("#nameDiv").html("用户名可以使用！");
}
}
}
}
};
function getXMLHttpRequest(){
//1.如果当前浏览器为IE6以上或其他浏览器
if(window.XMLHttpRequest){
return new XMLHttpRequest();
}else{
//2.如果当前浏览器为IE6以下
return new ActiveXobject("Microsoft.XMLHTTP");
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
# Get和Post请求的区别
# JQuery实现Ajax
$.ajax({对象});
例：
# Ajax其他拓展方法
# get和post方法
# getJSON和postJSON方法
# Ajax加载HTML数据
由服务器直接生成所需的HTML片段，Ajax加载这些HTML数据进行渲染。
首先在servlet传输数据到指定的jsp页面。
然后在另一个jsp页面获取该数据
最后在呈现页面中，用Ajax加载上面的html。
# Load方法
complete是回调函数，他跟success是有区别的。
complete针对的是匹配的元素。
load包含匿名回调函数，自动将返回值设置为匹配元素的HTML内容。
# 使用Ajax提交表单数据
# .serializeArray()
将有效控件转化成JSON对象数组，包含2个属性
# $.param()
将serializeArray生成的JSON数组转化成以下请求字符串的格式
# .serialize()方法
将serializeArray和param整合了，调用此方法能够高效的进行提交表单操作。常用！
# JSON
# 描述
JavaScript Object Notation
一种轻量级的数据交换格式
采用独立于语言的文本格式
通常用于在客户端和服务器之间传递数据
# 优点
轻量级交互语言、结构简单、易于解析
# 语法
var json对象 = {"name":"小明","age":15};
var json数组 = [1,5,7,2,8];
var json数组对象 = [{"name":"张三"},{"name":"李四"}];
2
3
本文由作者总结各大视频教学网编写的笔记，未经允许禁止转载。