一、原生AJAX的兼容版本实现
function createXhr(){
var Xhr = null;
//浏览器的判断
if(window.XMLHttpRequest){
//ie789 chrome FF.....
xhr = new XMLHttpRequest();
}else{
//IE5.5 6
xhr = new ActiveXobject("Microsoft.XMLHttp");
}
return xhr
}
二、AJAX对象的成员
属性：
1、responseText //以字符串形式接受服务端返回的信息
2、readyState //表示ajax状态值
3、onreadystatechange //事件，该事件可以感知ajax状态readyState的变化
方法：
1、open() //创建一个新的HTTP请求
2、send() //发送请求到服务器
三、readyState的五种状态
1、0 --------创建ajax对象完毕
2、1---------有调用Open()方法
3、2---------有调用send()方法
4、3---------服务器端数据只返回了一部分
5、4---------服务器端数据全部返回，ajax请求完成
四、对特殊符合进行编码
在浏览器的地址栏里面传递一些特殊符号信息，会被误解，例如：& = 空格 中文。
在js里面可以通过encodeURIComponent()对特殊符号等信息进行编码。
六、GET请求
function getServer(){
//获取xhr
var xhr = creatXhr();
//创建请求
xhr.open("get","server.php?age=18",true);
//设置回调函数
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status==200){ //if里面2个判断的位子不能变
console.log(xhr.responesText)
}
};
//发送请求
xhr.send(null); //get请求，里面要写null；
};
七、POST请求
var nm = document.getElementById("username").value;
nm = encodeURIComponent(nm);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState==4&&xhr.status==200){
alert(xhr.responseText);
}
}
xhr.open('post','02.php');
//以下方法设置header头信息，作用把传递的数据组织为XML格式
//注意：要在OPEN()方法执行之后设置
//注意：post请求必须要设置header这个步骤，才能成功传值
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
var info = "name="+nm+"&age=20";
xhr.send(info);
八、get和post有什么不同
1、给服务器传递的数据量不同，get是最多2K，post原则上没有限制
2、安全方面，post传递的数据相对比较安全
3、传递数据的形式不一样
get方式在URL地址后面以请求字符串形式传递参数，中间使用&符号连接
post方式是把form表单的数据获取出来以xml形式传递给服务器
九、表单提交数据的Content-type请求消息头
<form enctype=" "></form>
1、text/plain
2、application/x-www-form-urlencoded（默认的）
3、multipart/form-data（文件和图片必须设置为这个）
欢迎加入大前端交流群！群号：277942610，VIP新群
