Ajax学习笔记
一、创建一个ajax脚本并使用
摘要：
1. 编写 Ajax 库，AJAX 请求步骤
2. 创建 ajax 对象：XMLHttpRequest
3. 在 IE6 下兼容 XMLHttpRequest 的解决方案：ActiveXObject("Microsoft.XMLHTTP")
4. window属性与变量的关系
5. 用 window 属性来处理 IE6 的兼容性问题
6. 连接服务器：oAjax.open()
7. 同步与异步的区别
8. 发送请求：oAjax.send()
9. 接收返回：oAjax.onreadystatechange、readyState 属性、oAjax.status、oAjax.responseText
10. 封装 AJAX 函数
Ajax是用于异步加载页面内容，其技术核心是XMLHttpResponse对象
在IE6以及降低版本中不能直接使用该对象，具体创建Ajax对象方法如下：
1、创建Ajax对象
function ajax(url,fnSucc,fnFaild){
//1.创建Ajax对象
var oAjax;
if(window.XMLHttpRequest){
oAjax=new XMLHttpRequest();
}else{
oAjax=new ActiveXObject("Microsoft.XMLHTTP");
}
这里需要注意点：
关于window
要判断浏览器是否支持直接使用XMLHttpRequest，而判断方法需要判断浏览器是否有这个属性，所以要加上window在ie6中不加window会抛错，提示未定义这个变量，但是加上window就变成一个属性了，在ie6下不会抛错最多就是个undefined的属性，那么可以继续执行下面的语句，而下面的语句正是ie中特有的
2、连接服务器
//2.连接服务器
oAjax.open('GET',url,true);
open(方法【'GET'or'POST'】，url【文件名】，是否异步【true or false】)
这里需要注意：url要相对于执行代码的当前页面或者是用绝对路径，调用open()方法并不是真正的发送请求，只是启动一个（连接）请求以备发送
3、发送请求：send()
//3.发送请求给服务器
oAjax.send();
4、接收返回
* onreadystatechange事件是对请求状态的监控
当ajax（客户端）跟服务器有通信发生（或者说状态变化）的时候，会调用//类似window.onload
* readyState属性：0,1,2,3,4【告诉你通信进行到哪一步了】
0：未初始化尚未调用open()方法
1：启动。已经调用open()方法，但尚未调用send()方法
2：发送。已经调用send()方法，但尚未收到响应
3：接收。已经收到部分数据响应
4：完成，已经收到全部数据响应，而且可以在客户端使用了。【注意：这里并不代表已经成功调用了】
这里我们只需要重点关注等于4的时候，表示相应内容解析完成，可以调用【并不意味着成功】
status属性：请求结果【这里才是判断是否成功调用到数据】
如果要判断成功与否需要用到status属性status==200成功
responseText 取回结果 （可以做为参数传递给调用成功后执行的函数fnSucc）
代码如下：
//4.接收返回
oAjax.onreadystatechange=function(){
if(oAjax.readyState==4){
if(oAjax.status==200){
fnSucc(oAjax.responseText);
//这里定义一个函数fnSucc作为参数传递给ajax函数，表示在加载成功后我们需要做的一些动作，并且同时将url中的内容最为参数传递给fnSucc函数，以便前台使用
}else{
fnFaild();
}
}
}
}
到这里就已经成功创建了一个ajax脚本可以用来调用服务器中数据，下面我们已一个txt文本文件为例进行调用。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Ajax案例</title> <meta name="description" content="william"> <script src="ajax.js"></script> <script type="text/javascript"> ajax('ajax.txt',//这里是要打开文件的文件名也就是URL function(str){ var oBtn=document.getElementById("btn1"); oBtn.onclick=function(){alert(str);} },//这里是解析成功后需要执行的函数 其中str的值就是获取的服务器中文件为ajax.txt的内容 function(){ alert("在服务器中未找到该文件") })//这里是如果未在服务器中找到相应文件的处理函数 </script> </head> <body> <input type="button" id="btn1" value="获取txt文本内容" / > </body> </html>
点击按钮可以成功调用！
一、其余知识点补充说明
1、HTTP请求方法
GET----用于获取数据，最常用于向服务器查询某些信息可以将查询的字符串桉树追加到URL末尾的以便将信息发送给服务器（如浏览帖子）
e.g：https://www.baidu.com/s?word=%E5%8D%9A%E5%AE%A2%E5%9B%AD&tn=sitehao123&ie=utf-8&ssl_sample=normal这种类型的
POST----用于上传数据，post请求是将数据作为请求的主体提交（如用户注册）
相比较而言get安全性较低，容量也是有限的但是post请求安全性一般，容量几乎无限
但是我们ajax中基本99%是使用GET方法。
2、同步和异步
同步 ： 在日常生活中是多件事情是一起的 但是在js中同步的意思就是 事情必须一件一件做 如在网很卡的情况下只能等微博发完才能干别的
异步 ： 在日常生活中是事件需要一步一步的做 但是在js中的异步的意思就是 多件事情可以同时进行 如发了微博还可以继续刷微博干别的
ajax天生就是工作在异步模式下
3、数据类型
ajax目前用的数据类型基本都是json
4、eval()方法
eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。
如alert(eval("10+10")) 这里结果是20
