ajax概念———————————————————————————-
ajax:Asynchronous Javascript and XML
异步的js和XML,用javascript异步形式去操作xml
用于数据交互
表单(原理相似)——————————————————————————–
数据的提交
action : 数据提交的地址 默认是当前页面
method : 数据提交的方式 默认是get方式
1.get
把数据名称和数据值用 = 连接,多个数据用&进行连接,然后把数据放在
url?后面传给指定页面。如url?username=pobu&password=123
url长度有限制,get不能传送过多数据
2.post
理论上无限制
enctype : 提交数据的格式 默认为"application/x-www-form-urlencoded"
使用ajax———————————————————————————-
1.创建一个ajax对象
new xhr = new XMLHttpRequest(); //支持IE7以上和标准浏览器
new xhr = new ActiveXObject('Microsoft.XMLHTTP'); //IE6以下
//兼容写法
new xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');//判断一下window下的属性是否存在
//兼容写法2(利用异常处理)
new xhr = null;
try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
2.调用open方法
参数
第一个参数 : 打开方式
第二个参数 : 地址
第三个参数 : 是否异步
异步:非阻塞 前面的代码不会影响后面代码的执行
当后面代码不要用到前面的东西的时候,用异步非阻塞模式
同步:阻塞 前面的代码会影响后面代码的执行
当后面代码要用到前面的东西的时候,用同步阻塞模式
3.发送请求 调用send方法
4.服务器返回内容
xhr.responseText : ajax请求返回的内容被存放在这个属性下面
xhr.readyState : ajax工作状态
-0 (初始化) 还没有调用open()方法
-1 (载入) 已调用send()方法 正在发送请求
-2 (载入完成) send()方法完成 已收到全部响应内容
-3 (解析) 正在解析响应内容
-4 (完成) 解析响应内容完成,可以在客户端调用了
xhr.on readystate change : 当readyState改变的时候事件发生
xhr.status : 服务器状态,http状态码
1xx:消息
2xx:成功
3xx:重定向
4xx:请求错误
5xx:服务器错误
5.对返回数据的处理
浏览器内置对象JSON(IE7以下要引入官方JSON.js文件)
JSON.stringify(obj) : 可以把一个对象转为对应字符串
如 [1,2,3] -> '[1,2,3]'
{left:100} -> '{"left":100}'
JSON.parse(str) : 可以把字符串转成对应对象
'[1,2,3]' -> [1,2,3]
'{"left":100}' -> {left:100} (注意,成员名一定要加双引号)
ajax初步封装:
function ajax(method, url, data, successFn){
url = (method === 'get') && data ? url+'?'+data : url;
new xhr = null;
try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
xhr.open(method,url,true);
if( method === 'get' ){
xhr.send();
}else{
xhr.setRequestHeader('content-type','application/x-www-form-urlencode');
xhr.send(data);
}
xhr.onreadystatechange = function(){
if( xhr.readyState == 4){
if(xhr.status === 200){
successFn&&successFn(xhr.responseText);
}else{
alert( '出错了,Err:' + xhr.status + '错误');
}
}
}
}
ajax应用中get和post的区别处理—————————————————————-
get方式 :
1.在url?最后面加一个&随机数 防止读缓存 &+new Date().getTime
2.乱码 编码传输用encodeURI(name)
post方式 :
1.设置请求头 xhr.setRequestHeader('content-type','application/x-www-form-urlencode');//声明发送的数据类型
2.数据放在xhr.send(data)中。
post没有缓存问题,也无需编码