ajax相关知识总结

一、原生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请求消息头

1、text/plain

2、application/x-www-form-urlencoded（默认的）

3、multipart/form-data（文件和图片必须设置为这个）

欢迎加入大前端交流群！群号：277942610，VIP新群