Ajax

一、Ajax
1.异步请求技术
2.使用场景:
1、局部刷新、无需刷新整个页面
2、主动请求数据、ajax只能得到数据、不能进 
行转发或重定向
3.使用ajax技术的环境
ajax技术是由浏览器ajax引擎XMLHttpRequest对象发 
起的异步请求。
4.ajax使用步骤
1.创建ajax引擎
2.发起请求和提交方式、异步支持
3.传递数据
4.回调函数的接受
5.状态码的判断
//1.创建XMLHttpRequest对象 ajax引擎
var xmlHttpRequest = null;
if(window.XMLHttpRequest){//新版 
本浏览器
xmlHttpRequest = new 
XMLHttpRequest();
}else{//老版本IE浏览器
xmlHttpRequest = new 
ActiveXObject("Microsoft.XMLHTTP");
}
//2.发起ajax请求 url method 
true:异步 false:同步
xmlHttpRequest.open 
("GET","checkName.do?username="+name,true);
//3.发送数据 
xmlHttpRequest.send(null);
//4.回调函数 
xmlHttpRequest.onreadystatechange 
= function(){
//5.成功状态的数据执行 
4:响应结束 200:请求响应 成功
if 
(xmlHttpRequest.readyState == 4

&& xmlHttpRequest.status 
== 200) {
var data = 
xmlHttpRequest.responseText;
if(data == 
"true"){

span.innerHTML = "名字不可用";

span.style.color = "red";
}else if(data == 
"false"){

span.innerHTML = "名字可用";

span.style.color = "green";
}
}
}
二、JQ对Ajax的封装
1.$.load() 加载页面到指定区域
2.$.ajax() 底层封装、原始数据参数更多
$.ajax({
"url":"checkName.do",//请 
求的路径
"type":"GET",//请求的方式

"data":"username="+username,
"dataType":"text",//响应 
回的内容格式
"async":false,//同步
"timeout":5000,//等待时间
"success":function(data){
});
3.$.post(url,{data},function(data){},"json")
4.$.get(url,{data},function(data){},"json")
5.$.getJSON(url,{data},function(data){})json数据
6.$.getScript(url,{data});加载并运行js文件

posted on 2019-07-13 16:29  H先先生  阅读(178)  评论(0编辑  收藏  举报

导航