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文件
<!DOCTYPE html><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对象var request = new XMLHttpRequest;//4,准备发送数据:urlvar url = this.href;//"demo.txt"var method = "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，取消默认行为return false;// 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}";?>
<!DOCTYPE html><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)}});function Ajax(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字符串，以&隔开，即后缀var param = [];for (var key in obj.data) {param.push(key + '=' + obj.data[key]);}var sendData = param.join("&");var xhr = new XMLHttpRequest();//当为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/POSTurl:访问地址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>
