ajax详细解释.docx

ajax详细解释

什么是AjaxAjax是AsynchronousJavaScriptandXML的缩写，这一技术能够向服务器请求额外的数据而无需卸载整个页面，会带来良好的用户体验。传统的HTTP请求流程大概是这样的，浏览器向服务器发送请求-〉服务器根据浏览器传来数据生成response-〉服务器把response返回给浏览器-〉浏览器刷新整个页面显示最新数据，这个过程是同步的，顺序执行。AJAX在浏览器与Web服务器之间使用异步数据传输（HTTP请求）从服务器获取数据，这里的异步是指脱离当前浏览器页面的请求、加载等单独执行，这意味着可以在不重新加载整个网页的情况下，通过JavaScript接受服务器传来的数据，然后操作DOM将新数据对网页的某部分进行更新，使用Ajax最直观的感受是向服务器获取新数据不需要刷新页面等待了。ajax的理解(一)Ajax是AsynchronousJavascriptAndXML的缩写。作用：通过Ajax可以使用Javascript语句来调用XMLHttpRequest对象，直接与服务器进行通讯，可以在不重载页面的情况下与服务器交换数据。1、创建XMLAjax是AsynchronousJavascriptAndXML的缩写。作用：通过Ajax可以使用Javascript语句来调用XMLHttpRequest对象，直接与服务器进行通讯，可以在不重载页面的情况下与服务器交换数据。1、创建XMLHttpRequest对象varxhr=newXMLHttpRequest()对于IE早期版本（IE7及以下版本）使用，newActiveXObject("Microsoft.XMLHTTP")、newActiveXObject("Msxml2.XMLHTTP")等方式创建对象2、XMLHttpRequest对象常用属性和常用方法属性readystate返回XMLHTTP请求的当前状态码state返回当前请求的HTTP状态码statusText返回HTTP状态码对应的文本方法onreadystatechange监听readystate和state状态ajax的理解（二）ajax方法：通过HTTP请求加载远程数据get方法：通过远程HTTPGET请求载入信息post方法：通过远程HTTPPOST请求载入信息1、创建XMLHttpRequest对象functioncreateXHR(){returnwindow.XMLHttpRequest?newXMLHttpRequest():newActiveXObject("Microsoft.XMLHTTP");}2、将键值对转换成拼接串functionparams(data){vara=[];for(variindata){a.push(encodeURIComponent(i)+"="+encodeURIComponent(data[i]));}returna.join("&");}3、封装ajax方法参数method请求方法get和post默认getdata键值对{key:value}url链接地址cache缓存true和false默认true带缓存success成功error异常functionajax(args){varxhr=createXHR();vardata=http://www.cnblogs.com/kuikui/archive/2012/01/12/params(args.data);if(/get/i.test(args.method)){//当为get方式时将data直接拼接到url后args.url+=""+data;}if(!args.cache){//无缓存if(args.url.indexOf("")<0){//当无参数dataargs.url+="";}args.url+="&"+(newDate());//Math.random();}xhr.open(args.method,args.url,true);xhr.onreadystatechange=function(){if(4==xhr.readyState&&200==xhr.status){args.success(xhr.responseText,xhr.responseXML);}else{args.error();}}if(/post/i.test(args.method)){xhr.setRequestHeader("Content-Type&