1什么是ajax2为什么ajax这么火 特点3Ajax的工作原理4Ajax的工作流程5请求服务器调用方式GETPOST6同源策略数据传输方式及接口设计原则7ajax操作.txt 格式详细8ajax操作phpGET方式和POST方式以及封装1什么是ajaxAjax 的全称是 Asynchronous JavaScript and XML即异步 JavaScriptXML。AJAX 是一种在无需重新加载整个网页的情况下能够更新部分网页的技术。它并不是新的编程 语言而是几种原有技术的结合体。它由以下几种技术组合而成包括HTML/XHTML——主要的内容表示语言。CSS——为 XHTML 提供文本格式定义。DOM——对已载入的页面进行动态更新。XML——数据交换格式。XSLT——将 XML 转换为 XHTML用 CSS 修饰样式。XMLHttp——用 XMLHttpRequest 来和服务器进行异步通信是主要的通信代理。Ajax和XMLHttpRequest 两者的关系我们使用XMLHttpRequest对象来发送一个Ajax请求。当需要异步与服务器交换数据时需要 XMLHttpRequest 对象来异步交换。2为什么ajax这么火 特点不更新整个网站的情况下实现局部更新3ajax工作原理View层数据的展示页面的渲染-- 中间层ajax引擎— 服务器后台Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎)使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器。像—些数据验证和数据处理等都交给Ajax引擎自己来做,只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。4ajax的工作流程举个例子以追求一个女孩的过程为例虽然从来没有成功过但也经历过Ajax核心 XMLHTTPRequest对象(以下都是它的对象或方法)//喜欢一个女孩常用的方法 准备阶段 open‘method’,’url’,async;//规定请求的类型、URL 以及是否异步处理请求。 //想要更近一步联系她method请求的类型GET或POSTurl文件在服务器上的位置 asynctrue异步或false同步send();//发送请求, 将请求发送到服务器。 //给她写了一封信null:兼容性问题 安全性问题---防止传参 常用的属性传输阶段 向服务器请求状态的阶段走进一个女孩的心里 onreadystatechange//请求改变状态的触发器 //希望改变我们之间的关系readyState//请求状态 //女孩考虑了一下0-(未初始化)还没有调用send()方法1-(载入)已调用send()方法正在发送请求 2-(载入完成)send()方法执行完成 3-(交互)正在解析响应内容4-(完成)响应内容解析完成可以在客户端调用 服务器的响应阶段 status 服务器的http请求响应 的状态码//告知你答案,可以或着不可以等等其他说辞201-206都表示服务器成功处理了请求的状态代码说明网页可以正常访问200请求成功300-307表示的意思是要完成请求您需要进一步进行操作。通常这些状态代码是永远重定向的。304未修改 自从上次请求后请求的网页未被修改过。服务器返回此响应时不会返回网页内容。400-417表示请求可能出错会妨碍服务器的处理。404未找到 服务器找不到请求的网页。413请求实体过大 服务器无法处理请求因为请求实体过大超出服务器的处理能力。500至505表示的意思是服务器在尝试处理请求时发生内部错误。这些错误可能是服务器本身的错误而不是请求出错。500服务器内部错误 服务器遇到错误无法完成请求。503服务不可用 目前无法使用服务器由于超载或进行停机维护。通常这只是一种暂时的状态。 responseText——从服务器进程返回数据的字符串形式。 responseXML——从服务器进程返回的DOM兼容的文档数据对象。 相当于如果成功之后我可以干什么5请求服务器调用方式GETPOST1数据量早期GET少POST多就是因为IE限制的url长度4084k把参数锥到最后现在没有限制 浏览器和服务器是通过消息message传递的消息是由两部分组成头header》包含的信息少url头消息身子content》post数据 整体数据2安全性6同源策略数据传输方式及接口设计原则ajax只能访问同源接口同源策略域名主机名IP地址端口 协议相同不同的客户端脚本jsas…在没有明确授权的情况下 是不能来读取对方资源的同源策略的限制范围1本地缓存cookielocalstroageindexDB2不能互相访问dom节点3ajax不能向外部请求发送同源判断url协议主机名 端口三者相同才能同源7ajax操作.txt 格式.txt文件hellojs文件!DOCTYPEhtmlhtmlheadmeta charsetutf-8/meta nameviewportcontentwidthdevice-width, initial-scale1titleajax操作.txt/titlescript typetext/javascriptwindow.onloadfunction(){//1,获取a节点,并添加onclick函数document.getElementsByTagName(a)[0].onclickfunction(ev){//3,创建一个xhr对象varrequestnewXMLHttpRequest;//4,准备发送数据:urlvarurlthis.href;//demo.txtvarmethodGET//5,调用xhr对象的open方法request.open(method,url,true);//6,调用xhr对象的send方法request.send(null);//在前六步完成之后已经有了响应//7,为xhr对象添加onreadystatechange响应函数request.onreadystatechangefunction(){//8,判断响应是否完成,xhr对象的readystate属性值为4的时候if(request.readyState4){//9,判断响应是否可用,xhr对象status属性值为200if(request.status200||request.status304){//10,打印响应结果:responseTextalert(request.responseText)}}}//2取消默认行为returnfalse;// ev.preventDefault();}}/script/headbodyp不跳转的情况下获取数据/pa hrefdemo.txt接受demo1.txt1/a/body/html8ajax操作phpGET方式和POST方式以及封装?phpheader(Content-type:text/html;charsetutf-8);// $a$_GET[user];// $b$_GET[pwd];$a$_POST[user];$b$_POST[pwd];echo我是php页面接受到的user为{$a},接收到的pwd为{$b};?!DOCTYPEhtmlhtmlheadmeta charsetutf-8/meta nameviewportcontentwidthdevice-width, initial-scale1titleajax操作.txt/titlescript typetext/javascript// window.onload function() {// var xhr new XMLHttpRequest();// xhr.open(get, demo.php?user1pwd2, true);// xhr.send(null);// xhr.onreadystatechange function() {// if (xhr.readyState 4) {// if (xhr.status 200) {// console.log(xhr.responseText)// }// }// }// }// //POST方式// window.onload function() {// var xhr new XMLHttpRequest();// xhr.open(POST, demo.php, true);// xhr.setRequestHeader(Content-type,application/x-www-form-urlencoded;charsetutf-8);//设置头部信息// xhr.send(userdeo);// xhr.onreadystatechange function() {// if (xhr.readyState 4) {// if (xhr.status 200) {// console.log(xhr.responseText)// }// }// }// }//封装ajaxwindow.onloadfunction(){Ajax({type:GET,url:demo.php,data:{user:weiucnbin,pwd:532},success:function(msg){console.log(這是成功後獲取的数据msg)},error:function(msg){console.log(这是失败后获取的数据msg)}});functionAjax(obj){objobj||{};obj.typeobj.type||GETobj.urlobj.url||;obj.dataobj.data||null;obj.asyncobj.async||true;obj.successobj.success||function(){}obj.errorobj.error||function(){}//数据data字符串以隔开即后缀varparam[];for(varkeyinobj.data){param.push(keyobj.data[key]);}varsendDataparam.join();varxhrnewXMLHttpRequest();//当为GET/POST方式发送请求if(obj.type.toUpperCase()GET){xhr.open(obj.type,obj.url?sendData,obj.async);xhr.send();}else{xhr.open(obj.type,obj.url,obj.async);xhr.setRequestHeader(Content-type,application/x-www-form-urlencoded;charsetutf-8);//设置头部信息xhr.send(sendData);}xhr.onreadystatechangefunction(){if(xhr.readyState4){if(xhr.status200){obj.successobj.success(xhr.responseText)}else{obj.errorobj.error(xhr.responseText)}}}}}/* //调用方式 Ajax({ type:访问方式GET/POST url:访问地址 data向服务器传输的json{}即提交的后缀》参数 success请求成功的回调函数 error请求失败的回调函数 }) *//script/headbodyform actionmethodgetinput typetextnameuserplaceholder用户名brinput typepasswordnamepwdplaceholder密码brinput typesubmitvalue提交/form/body/html