对ajax的了解

1.什么是ajax？

ajax的英文名称：Asynchronous JavaScript and XML（异步的javascript和xml），ajax是一种无需重新加载页面，自动更新部分页面的技术，ajax的使用案例：百度的搜索框的关键字、登陆和注册的表单验证、股票信息的自动更新等。

2.传统的开发模式与ajax的开发模式的不同之处

传统的开发模式：同步执行，页面需要重新加载才可以有页面信息，效率不高。

ajax的开发模式：异步执行，页面不需要重新加载，自动更新页面信息，效率高。

3.ajax.js文件的编写步骤

（1）、创建ajax对象

创建XMLHTTPRequest对象，用于后台和服务器的交换数据，意味着：能无需重新加载页面的情况下，自动更新页面。注意：XMLHTTPRequest对象是所有浏览器都支持的对象，当然老版本的浏览器还不支持，如：IE7以下的版本。还是需要考虑兼容性问题。

demo：

//1.创建ajax对象
var xmlhttp;
if (window.XMLHttpRequest)
{// 兼容 IE7+, Firefox火狐, Chrome谷歌, Opera欧朋, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// 兼容 IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

（2）、连接服务器

//2.连接服务器
//open(方法, 文件名, 异步传输)
oAjax.open('GET', 'a.txt', true);

（3）、发送请求

//3.发送请求
oAjax.send();

（4）、接受返回值

请求状态监控：onreadystatechange事件

readyState属性：请求状态

0 （未初始化）还没有调用open()方法，尚未初始化

1 （载入）已调用send()方法，正在发送请求，正在加载

2 （载入完成）send()方法完成，已收到全部响应内容，加载完成

3 （解析）正在解析响应内容，正在处理

4 （完成）响应内容解析完成，可以在客户端调用了，处理完成

status属性：请求结果

demo：

//4.接收返回
oAjax.onreadystatechange=function()
{//
//oAjax.readyState  //浏览器和服务器，进行到哪一阶段了
if(oAjax.readyState==4) //处理完成，
{
if(oAjax.status==200)   //成功，200状态码
{
alert('成功：'+oAjax.responseText)；//成功就返回文本信息
}
else
{
alert('失败:'+oAjax.status);
}//失败就返回状态码
}
};

4.ajax的使用过程

a、先写好ajax.js文件，并连接到静态页面html

b、写好文本，放在服务器站点上

demo：

<script>
window.onload=function ()
{//页面加载时
var oBtn=document.getElementById('btn1');

oBtn.onclick=function ()
{//oBnt对象点击事件，调用ajax.js文件里的ajax(url, fnSucc, fnFaild)方法，注意url文件路径必须是英文，不可有中文，相对路径或绝对路径都可以。
ajax('aaa.txt', function (str){
alert(str);//成功则返回文本中的内容
}, function (){
alert('失败');//不成功返回‘失败’
});
};
};
</script>

c、处理缓存方法

阻止缓存方法：浏览器通过访问url的来识别决定是否使用缓存，（只要url地址在变，就可以了解决缓存问题）。也可以在路径那里加上get数据来阻止缓存。getTime()是毫秒数

demo：

<script>
window.onload=function ()
{
var oBtn=document.getElementById('btn1');

oBtn.onclick=function ()
{
ajax('aaa.txt?t='+new Date().getTime(), function (str){//在url路径上添加get方法即可阻止缓存问题，当然也可以在浏览器上改变url路劲
alert(str);//var arr=eval(str);ajax.js读取的数据是字符串，如果文本内容是数组，要将数组变字符串，就要使用到eval（）方法
}, function (){
alert('失败');
});
};
};
</script>

5.HTTP请求方法

GET是用于获取数据（如：浏览帖子）：

POST是用于上传数据（如：用户注册）：

get、post的区别：

get是在url里传数据、安全性不高，容易泄露信息内容，容量小：有缓存，

post安全比较好，不通过网址url传递信息，可以传大文件：2G，容量大，没有缓存