ajax实现数据请求

• 小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

考虑到浏览器兼容问题，主要是判断iE9以上还是iE9以下，需要检查浏览器是否支持 XMLHttpRequest 对象。

如果支持，则创建 XMLHttpRequest 对象，不支持创建ActiveXObject('Microsoft.XMLHttp')对象

获取ajax对象

var xhr = null;
if(window.XMLHttpRequest){
	xhr = new XMLHttpRequest();
}else{
    xhr = new ActiveXObject('Microsoft.XMLHttp');

ajax发送请求，请求方式两种：get/post。以get请求方式为例：

一、获取ajax对象

上文已经提到，需要考虑浏览器兼容问题。

二、初始化，建立连接

    xhr.open("get","url",true/false);
    
    url:包括路径名和请求参数
    true:ajax向服务器发送的是异步请求，请求过程中，不会打断用户操作
    false:ajax向服务器发送的是同步请求，请求过程中，页面会被锁住，用户需要等待服务器响应结束之后，
    才能继续其他操作。
    

三、.给ajax对象注册监听器

    xhr.onreadystatechange=function(){}
   

用于接受返回数据信息

注：如果是post请求：

1.需加上 xhr.send("参数名=参数值&....");

2.需要加上消息头：xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");

问题

1.中文乱码问题

IE浏览器采用的gbk格式处理中文，chrome浏览器采用的是utf-8格式处理中文，而服务器解码格式是utf-8,所以ie浏览器有中文乱码问题，解决方案是，通过encodeURI(中文参数)处理参数

2.缓存问题

若请求地址不发生改变，那么ie浏览器返回的是缓存数据，不会真正的向服务器发送请求，如果需要发送请求，那么在请求地址后面添加随机数或者时间戳改变每一次的请求地址

jquery与ajax结合实现数据请求

jquery将它封装成了一个函数$.ajax()，来执行ajax请求。

$.ajax常用参数

常用参数：
1、url 请求地址
2、type 请求方式，默认是'GET'，常用的还有'POST'
3、dataType 设置返回的数据格式，常用的是'json'格式，也可以设置为'html'
4、data 设置发送给服务器的数据
5、success 设置请求成功后的回调函数
6、error 设置请求失败后的回调函数
7、async 设置是否异步，默认值是'true'，表示异步

基本写法

}

$.ajax({
url: '/change_data', 
type: 'GET', 
dataType: 'json', 
data:{'code':300268} 

success:function(dat){ alert(dat.name); }, 
error:function(){ alert('服务器超时，请重试！'); } 
});