原生的Ajax

ajax
概念是：在不进行整个页面的更新的情况下 局部更新界面（局部刷新技术）
ajax 和请求数据有关
前后端分工 中间由ajax来对接
ajax就是异步的javascript和xml（树形结构文档 xhml—写法和html写法一致 写的标签是自定义的标签）
作用是：快速创建动态网页的技术
ajax在与后端 进行少量的数据交互 返回到前端 实现异步更新

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

创建ajax对象
var xmlHttp;
if(window.XMLHttpRequest)
{
//ie7+ 火狐 谷歌
xmlHttp=new XMLHttpRequest();
}
else{
//ie5 ie6
xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
2.建立连接
xmlHttp.open(“get”,"",true);

3.发送请求
xmlHttp.send();
4.响应事件
xmlHttp.onreadystatechange=function (){
// readyState =4表示读取完成，status=200表示服务器响应成功
500表示服务器报错 404表示页面丢失
if(xmlHttp.readyState4&&xmlHttp.status200)// 如果读取完成并且服务器响应成功
{
//下面两个都是服务器响应数据，拿到数据 操作dom
xmlHttp.response //object类型
xmlHttp.responseText //string类型
}
}
5.等待更新界面

**
请求方式不同，传递参数的格式不同，因此ajax可能同步异步
什么是ajax的同步异步？
同步是 等待ajax请求响应结束 直接在继续加页面
异步是 ajax请求和页面同时加载
原生js不能使用同步，因为ajax对象在主线程
**

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.readyState4&&xmlHttp.status200)
{
callback(xmlHttp.response);
}
}

直接在外面调用封装的ajax方法
封装了匿名函数回调

ajax("post","./data/stu.json",null,function (res){
        console.log(res);
    })

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

<script src="http://jia.maodou.com:8000/addinfo?id=10086&name=张三&callback=getData"></script>

jsonp 跨域原理 ----src跨域
因为在前端 src属性 可以直接连接远程的api（程序应用集 也叫 接口）
jsonp 跨域的api接口
http://www.maodou.com?id=1000&name=123&callback=getdata
jsonp 跨域的回调函数 callback=getdata 携带函数到后端

<iframe id="iframe" src="http://jia.maodou.com:8000/addinfo"></iframe>

iframe 设置domain 针对 当前网页 和服务器网页主域名和子域名的问题 解决跨域
域名降级处理
在两个页面设置 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);
}