原生AJAX

一、什么是AJAX

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

二、五步法、书写原生AJAX

1、 创建ajax对象 考虑兼容，ie5、ie6的兼容
2、建立连接
使用open方法
参数 1、method 请求方式 get post
2、连接的服务器文件地址 url
3、async ajax 请求是异步还是同步，默认是异步 true 异步 false 同步
4、用户名
5、密码
3、发送请求
使用send 方法
如果你的方式 get 请求的是后台传递的参数，直接写在url之后
http://www.maodou.com/getdata?id=10086&pwd=12345;
如果是post方式 传递参数 直接写在send方法里面
send（{ id：10086，pwd：123456});
4、ajax响应事件
5、页面更新
1、创建ajax对象

var xmlHttp;
if(window.XMLHttpRequest)
{
xmlHttp=new XMLHttpRequest();
}else{
xmlHttp=new ActiveObject("Microsoft.XMLHTTP")
}

2、建立连接

    xmlHttp.open("get","",true);

3、发送请求

  xmlHttp.send();

4、响应事件
5.获取服务器响应数据

 //4.响应事件
    xmlHttp.onreadystatechange=function (){
        //readyState  为4  读取完成
        //status  200  服务器响应成功   500  是服务器报错   404  页面丢失
        if(xmlHttp.readyState==4&&xmlHttp.status==200)
        {
         //  5.获取服务器响应数据
            //下面两个都是服务器响应数据
            xmlHttp.response//object
            xmlHttp.responseText//string
            //拿到数据  操作dom  更新界面
        }
    }

同步异步区别

ajax 请求方式不同 传递参数 格式不同
可能是同步或者异步
同步是 等待ajax请求响应结束，再继续加载页面
异步是 ajax请求和页面同时加载

原生js 不能使用同步 ajax对象在主线程

    var data=null;
    var http=new XMLHttpRequest();
    http.open("get","./data/stu.json",true);
    http.send();
    http.onreadystatechange=function (){
        if(http.readyState==4&&http.status==200)
        {
            console.log(http.responseText);
            data=http.response;
        }
    }

    console.log(data);

POST和GET方式区别

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

在以下情况中，请使用 POST 请求：

1、无法使用缓存文件（更新服务器上的文件或数据库）
2、向服务器发送大量数据（POST 没有数据量限制）
3、发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

原生ajax的封装

 function ajax(method, url, data, callback) {
            var xmlHttp;
            //做兼容处理
            if (window.XMLHttpRequest) {
                xmlHttp = new XMLHttpRequest();
            } else {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            if (method == "get") {
                if (data) {
                    url += "?";
                    url += data;
                }
                xmlHttp.open(method, url);
                xmlHttp.send();
            } else {
                xmlHttp.open(method, url);
                if (data) {
                    xmlHttp.send(data);
                } else {
                    xmlHttp.send();
                }
            }
            xmlHttp.onreadystatechange = function() {
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    callback(xmlHttp.response);
                }
            }

        }

在外面直接调用封装的ajax方法

    ajax("get", "http://localhost:8080/", function(res) {
            console.log(res);
        })

jsonp 跨域

1、jsonp 跨域是通过 前端src 访问后端接口 传递参数以及回调函数
2、后端接收回调函数 返回回调函数的执行到前端
3、前端的函数执行 获取服务器的响应

  function getData(res) {
            console.log(res);
        }

jsop跨域原理 src跨域
因为在前端src属性 可以直接连接远程的api ，就是接口
jsonp 跨域的api接口
http://www.maodou.com?id=1000&name=123&callback=getdata
jsonp 跨域的回调函数 callback=getdata 携带函数到后端

iframe跨域

iframe 设置domin 针对网页和服务器网页 主域名和子域名解决这个跨域
域名降级处理‘
在两个页面设置document.domain 降级成两个服务器域名的相同部分 www.maodou.com
jia.maodou.com
maodou.com

//进行降域处理
    document.domain = "maodou.com";
    iframe.onload = function () {
        //等待加载完成之后处理获取的数据

        //获取当前iframe内部的dom元素   使用  contentDocument
        var a = this.contentDocument;  //获取iframe框架内容的dom
        console.log(a.getElementsByTagName("p")[0]);
        console.log(a.getElementsByTagName("div")[0].innerText);

        //获取传递window  使用 contentWindow
        var b = this.contentWindow;
        console.log(b.data);
    }