ajax总结二

一、ajax定义

1、 AJAX 是一种在无需重新加载整个网页的情况下，通过在后台与服务器进行少量数据交换，能够更新部分网页的技术，是一种用于创建快速动态网页的技术。
2、AJAX = 异步 JavaScript 和 XML。

二、五步写ajax

1、创建对象

XMLHttpRequest 是 AJAX 的基础，所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject），用于在后台与服务器交换数据

var http=new XMLHttpRequest();

//浏览器兼容写法
var http=new XMLHttpRequest();
    var http;
    if(window.XMLHttpRequest){
        http=new XMLHttpRequest();
    }
    else {
        http=new ActiveXObject;
    } 

2、建立服务器链接

1）语法：对象.open(method,url,async，username，password)
2）参数：
method：请求的类型，get，post
url：url
async：是否异步处理

http.open("get","http://www.baidu.com",true);//异步处理

3、发送数据

http.send(String)//String仅用于post请求

4、建立ajax事件
5、渲染界面

    http.onreadystatechange=function (){
        //readyState  4 请求读取完成
        //status  响应的状态码  200  500
        if(http.readyState==4&&http.status==200)
        {
            //5.渲染界面http.responseText  http.response   作为相应主体返回的内容 返回的json
            //http.responseText
        }
    }

需要注意的问题

①get与post区别

get	post
get请求会将提交的数据拼接在URL后面	post请求会将提交的数据放在请求头里
get请求对提交的数据有大小限制，大概在2000个字符左右	post请求对数据没有大小限制
提交非敏感数据和小数据	提交敏感数据和大数据
get方式请求数据会被浏览器缓存起来，可以访问历史记录，不安全
发送请求时,因为Get请求的参数都在url里,所以send函数发送的参数为null,	而Post请求在使用send方法时,却需赋予其参数；
服务器端使用Request.QueryString来获取参数,	服务器端使用Request.Form来获取参数.
	如果需要像 HTML 表单那样 POST 数据，使用对象.setRequestHeader("Content-type","application/x-www-form-urlencoded");来添加 HTTP 头，在open之后，send之前
最常用于向服务器查询某些信息	通常用于向服务器发送应该被保存的数据，post应该把数据作为请求的主体提交

②跨域原理
http.open("get","http://www.baidu.com",fasle);，url只能向同一个域中使用相同端口和协议的url发送请求。如果url与启动请求有任何差别，都会引发安全错误。
什么是跨域

跨域问题来源于JavaScript的同源策略，即只有 协议+主机名+端口号 (如存在)相同，则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源，不能访问和操作其他域下的资源。跨域问题是针对JS和ajax的，html本身没有跨域问题，比如a标签、script标签、甚至form标签（可以直接跨域发送数据并接收数据）等

产生跨域原因 Access-Control-Allow-Origin

浏览器限制
跨域(协议,主机名,端口号中有一个不同就产生跨域)
XHR(XMLHttpRequest)请求

解决跨域问题及跨域资源共享
cros和jsonp

jsonp：https://blog.csdn.net/badmoonc/article/details/82289252
cros：https://blog.csdn.net/badmoonc/article/details/82706246

   //ajax请求封装
    function method(med, api, async, data, callback) {
    var http;
    if(window.XMLHttpRequest){
        http=new XMLHttpRequest();
    }
    else {
        http=new ActiveXObject;
    } 
        if (med == "get") {
            if (data) {
                api += "?";
                api += data;
            }
            http.open(med, api, async);
            //设置请求头
            /*http.setRequestHeader("header","Access-Control-Allow-Origin:*");
            http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");*/
            http.send();
        }
        else {
            http.open(med, api, async);
            if (data) {
                http.send(data);
            }
            else {
                http.send();
            }
        }

        http.onreadystatechange = function () {
            if (http.readyState == 4 && http.status == 200) {
                callback(http.responseText);//作为响应主体被返回的文本
            }
        }
    }
   
    //jsonp跨域  只能用get  
   //跨域原理是通过src +  callback回调函数来请求 ---不是ajax
   //具体参考https://blog.csdn.net/badmoonc/article/details/82289252
   
    var src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=1&cb=getData";
    method("get", src, true, "", getData);
    })
    <script>
    //回调函数
    function getData(res){
        callback(res.response);
        console.log(res);
    }
    </script>

 
     //  cros  前端基本无变化，完全在后端设置，具体参考https://blog.csdn.net/badmoonc/article/details/82706246
    //  在php文件里面配 header('Access-Control-Allow-Origin: * ');

③同步异步

false：同步 响应完之后再执行
使用 async=false 时，不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可
true：异步 边响应边执行