ajax
异步JavaScript和XML ,局部刷新
允许浏览器与服务器通信而无须刷新当前页面的技术
异步现象：客户端发送请求到服务端，无论服务是否返回响应，客户端都可以随意做其他事情，不会卡死。
原理：
当我们使用AJAX之后，浏览器是先把请求发送到XMLHttpRequest异步对象之中，异步对象对请求进行封装，
然后再以http协议的方式发送给服务器。服务器并不是以转发的方式响应，而是以流的方式把数据返回给浏览器（因为不是转发的方式，所以是无刷新就能够获取服务器端的数据）
1.JS原生Ajax
总结：所有的异步访问都是ajax引擎
步骤：
1.创建ajax引擎对象
2.设置监听
3.绑定地址 ture代表异步
4.发送
5.响应数据
案例：
function checkUsername(){
// 获得文件框值:
var username = document.getElementById("username").value;
// 1.创建异步交互对象
var xhr = createXmlHttp();
// 2.设置监听
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
document.getElementById("span1").innerHTML = xhr.responseText;
}
}
}
// 3.打开连接
xhr.open("GET","${pageContext.request.contextPath}/user_findByName.action?time="+new Date().getTime()+"&username="+username,true);
// 4.发送
xhr.send(null);
}
function createXmlHttp(){
var xmlHttp;
try{ // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
try{// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
return xmlHttp;
}
readyState：请求状态readyState一改变，回调函数被调用，它有5个状态
0：未初始化
1：open方法成功调用以后
2：服务器已经应答客户端的请求
3：交互中。Http头信息已经接收，响应数据尚未接收。
4：完成。数据接收完成
Jquery是JS框架自然对js原生的ajax进行了封装，封装后的ajax操作更简洁更强大
其中三种常用的方法：
1. $.get(url,[data],[callback],[type])：
2. $.post(url,[data],[callback],[type])
3. $.ajax({option1:value,option2:value2...});
注解：
url:
代表服务请求的服务器端地址
data:代表请求服务器的数据
callback：表示服务器端成功响应触发的函数（只有正常成功返回才执行）
type:表示服务器返回的数据类型(jquery会根据指定的类型自动类型转换)
2.JQ的post/get方式
WEB7案例
function f1(){
$.get(
"/WEB7/ss",//url
{"name":"zz","age":11},//参数
function(xx){
alert(xx);
},
"text"
);
}
function f2(){
$.post(
"/WEB7/ss",//url
{"name":"zz","age":11},//参数
function(xx){
alert(xx);
},
"text"
);
}
3.JQ的ajax
案例模版：
//jq的ajax方法：
function f3(){
$.ajax(
{ url: "/WEB7/ss",
type:"POST",
async:true, //是否异步
data:{"name":"s","age":44},
success:function(xx){
alert(xx.name);
},
/* error:function(){
alert("fail");
}, */
dataType:"json",
},
);
}