JavaScript学习日记之AJAX?

什么是AJAX?

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。 传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。 有很多使用 AJAX 的应用程序案例:百度智能提示,天气预报。

AJAX的实现?

 var xhr = null ; //创建ajax对象
if (window.XMLHttpRequest) {

 xhr = new XMLHttpRequest();

}else {
 xhr = new Activexobject('Mircrsoft.XMLHTTP');
}
 xhr.open('get', url,true);// 配置发生请求
 xhr.send(null); //执行发生请求
//指定回调函数
 xhr.onreadystatechange =function(){
 if (xhr.readyState == 4&&xhr.status == 200) {
 var data = xhr.responseText;
  } 
 }

简单的封装ajax?

 function ajax(data){

 //data={data:"",dataType:"xml/json",type:"get/post ",url:"",asyn:"true/false",success:function(){}, failure:function(){}}

 //data:{username:123,password:456}

 //data = 'username=123&password=456';

 //第一步:创建xhr对象

 var xhr = null;

 if(window.XMLHttpRequest){//标准的浏览器

 xhr = new XMLHttpRequest();

 }else{

 xhr = new ActiveXObject('Microsoft.XMLHTTP');

 }

 //第二步:准备发送前的一些配置参数

 var type = data.type == 'get'?'get':'post';

 var url = '';

 if(data.url){

 url = data.url;

 if(type == 'get'){

 url += "?" + data.data + "&_t="+new Date().getTime();

 }

 }

 var flag = data.asyn == 'true'?'true':'false';

 xhr.open(type,url,flag);

 //第三步:执行发送的动作

 if(type == 'get'){

 xhr.send(null);

 }else if(type == 'post'){

 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

 xhr.send(data.data);

 }

 //第四步:指定回调函数

 xhr.onreadystatechange = function(){

 if(this.readyState == 4){

 if(this.status == 200){

 if(typeof data.success == 'function'){

 var d = data.dataType == 'xml'?xhr.responseXML:xhr.responseText;

 data.success(d);

 }

 }else{

 if(typeof data.failure == 'function'){

 data.failure();

 }

 }

 }

 }

}

你可能感兴趣的:(JavaScript学习日记之AJAX?)