ajax 详解（GET，POST方式传输以其封装）

1，什么是ajax
2，为什么ajax这么火 特点
3，Ajax的工作原理
4，Ajax的工作流程
5，请求服务器调用方式GET，POST
6，同源策略，数据传输方式及接口设计原则
7，ajax操作.txt 格式（详细）
8，ajax操作php（GET方式和POST方式）以及封装

1，什么是ajax

Ajax 的全称是 Asynchronous JavaScript and XML，即异步 JavaScript+XML。AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它并不是新的编程 语言，而是几种原有技术的结合体。它由以下几种技术组合而成，包括：
HTML/XHTML——主要的内容表示语言。
CSS——为 XHTML 提供文本格式定义。
DOM——对已载入的页面进行动态更新。
XML——数据交换格式。
XSLT——将 XML 转换为 XHTML（用 CSS 修饰样式）。
XMLHttp——用 XMLHttpRequest 来和服务器进行异步通信，是主要的通信代理。

Ajax和XMLHttpRequest 两者的关系：我们使用XMLHttpRequest对象来发送一个Ajax请求。当需要异步与服务器交换数据时，需要 XMLHttpRequest 对象来异步交换。

2，为什么ajax这么火 特点

不更新整个网站的情况下，实现局部更新

3，ajax工作原理

View层（数据的展示，页面的渲染）-- 中间层（ajax引擎）— 服务器（后台）

Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎)，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器。像—些数据验证和数据处理等都交给Ajax引擎自己来做,，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

4，ajax的工作流程

举个例子，以追求一个女孩的过程为例，虽然从来没有成功过，但也经历过

Ajax核心： XMLHTTPRequest对象(以下都是它的对象或方法)//喜欢一个女孩常用的方法（ 准备阶段 ）： open（‘method’,’url’,async）;//规定请求的类型、URL 以及是否异步处理请求。 //想要更近一步，联系她method：请求的类型；GET或POSTurl：文件在服务器上的位置 async：true（异步）或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，请求服务器调用方式GET，POST

1，数据量

早期：GET少，POST多，就是因为IE限制的url长度（4084k），把参数锥到最后
现在：没有限制 ；
浏览器和服务器是通过消息（message）传递的；消息是由两部分组成：
头（header）=》包含的信息少：url头消息
身子（content）=》post数据 整体数据

2，安全性

6，同源策略，数据传输方式及接口设计原则

ajax只能访问同源接口

同源策略：域名（主机名，IP地址）端口 协议相同

不同的客户端脚本（js，as…）在没有明确授权的情况下 是不能来读取对方资源的
同源策略的限制范围：
1，本地缓存（cookie，localstroage，indexDB）
2，不能互相访问dom节点
3，ajax不能向外部请求发送

同源判断：url协议，主机名 ，端口三者相同，才能同源

7，ajax操作.txt 格式

.txt文件

hello

js文件

<!DOCTYPEhtml><html><head><meta charset="utf-8"/><meta name="viewport"content="width=device-width, initial-scale=1"><title>ajax操作.txt</title><script type="text/javascript">window.onload=function(){//1,获取a节点,并添加onclick函数document.getElementsByTagName("a")[0].onclick=function(ev){//3,创建一个xhr对象varrequest=newXMLHttpRequest;//4,准备发送数据:urlvarurl=this.href;//"demo.txt"varmethod="GET"//5,调用xhr对象的open方法request.open(method,url,true);//6,调用xhr对象的send方法request.send(null);//在前六步完成之后已经有了响应//7,为xhr对象添加onreadystatechange响应函数request.onreadystatechange=function(){//8,判断响应是否完成,xhr对象的readystate属性值为4的时候if(request.readyState==4){//9,判断响应是否可用,xhr对象status属性值为200if(request.status==200||request.status==304){//10,打印响应结果:responseTextalert(request.responseText)}}}//2，取消默认行为returnfalse;// ev.preventDefault();}}</script></head><body><p>不跳转的情况下获取数据</p><a href="demo.txt">接受demo1.txt1</a></body></html>

8，ajax操作php（GET方式和POST方式）以及封装

<?phpheader('Content-type:text/html;charset=utf-8');// $a=$_GET['user'];// $b=$_GET['pwd'];$a=$_POST['user'];$b=$_POST['pwd'];echo"我是php页面！接受到的user为{$a},接收到的pwd为{$b}";?>
<!DOCTYPEhtml><html><head><meta charset="utf-8"/><meta name="viewport"content="width=device-width, initial-scale=1"><title>ajax操作.txt</title><script type="text/javascript">// window.onload = function() {// var xhr = new XMLHttpRequest();// xhr.open('get', 'demo.php?user=1&pwd=2', 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;charset=utf-8");//设置头部信息// xhr.send("user=deo");// xhr.onreadystatechange = function() {// if (xhr.readyState == 4) {// if (xhr.status == 200) {// console.log(xhr.responseText)// }// }// }// }//封装ajaxwindow.onload=function(){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){obj=obj||{};obj.type=obj.type||"GET"obj.url=obj.url||'';obj.data=obj.data||null;obj.async=obj.async||true;obj.success=obj.success||function(){}obj.error=obj.error||function(){}//数据data字符串，以&隔开，即后缀varparam=[];for(varkeyinobj.data){param.push(key+'='+obj.data[key]);}varsendData=param.join("&");varxhr=newXMLHttpRequest();//当为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;charset=utf-8");//设置头部信息xhr.send(sendData);}xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status==200){obj.success&&obj.success(xhr.responseText)}else{obj.error&&obj.error(xhr.responseText)}}}}}/* //调用方式 Ajax({ type:访问方式GET/POST url:访问地址 data：向服务器传输的json{}，即提交的后缀=》参数 success：请求成功的回调函数 error：请求失败的回调函数 }) */</script></head><body><form action=""method="get"><input type="text"name='user'placeholder='用户名'><br><input type="password"name='pwd'placeholder='密码'><br><input type="submit"value="提交"></form></body></html>