JavaScript 阿贾克斯

Ajax技术的核心是XMLHttpRequest对象 用于在后台与服务器交换数据
ajax 异步请求 主要用来请求数据
远程地址或者本地地址
传统的web交互是用户触发一个http请求服务器 然后服务器收到之后 做出响应到用户 哪怕是一个很小的交互 都会返回一个完整的HTML页面 而且用户每次都要浪费时间和带宽去重新读取整个页面
ajax是一种用于创建快速动态网页的技术 通过在后天与服务器进行少量数据交换 使页面实现异步更新 这意味着可以在不重新加载整个页面的情况下 对网页的某部分进行更新
同步请求 是等待请求完成之后执行后续代码
异步请求 代码和请求同时执行
1、XMLHttpRequest API(应用程序编程接口)
①abort()停止请求
②getAllResponseHeader()把http请求的所有相应首部作为键值返回
③open(“menthod”,“URL”,[asyncFlag],[“username”],[“password”])建立对服务器的调用 method的参数可以是get(读数据)/post(写数据)/put URL本地/远程路径 其它可选参数 是否异步(T/F) 用户名 密码
④send()向服务器发送请求 参数不写是请求数据 写参数是传输数据
⑤setRequestHeader()
2、如何使用ajax
①实例化对象 var http = new XMLHttpRequest();
②和服务器建立联系 http.open("get")
③发送请求 http.send();
④获取服务器响应的数据 http.onreadstatechange()=function (){};读状态码
⑤读取数据

var http=new XMLHttpRequest();
http.open("get","./list/data.txt");
http.send();
http.onreadystatrchange=function (){
 /*   console.log(http.readyState);  输出2 3 4 在console为4的时候状态码为200*/
    if(http.readyState==4&&http.status==200){
        console.log(http.response);//将会读到txt里面的json数据
        var data=JSON.parse(http.response);//把数据转换为JavaScript对象
        console.log(data);
    }    
}

在本地创建一个txt文档 写一个小的json数据

[
    {
        "name":"小花";
        "sex":"男";
    },
    {    
        "name":"小草";
        "sex":"男";
    }
]

3、异步

var data=null;
var http=new XMLHttpRequest();
http.open("get","./list/data.txt",true);
http.send();
function showdata(callback){
    http.onreadystatechange=function(){
        if(http.readyState==4&&http.status==200){
            callback(http.response);
        }
    }
}
showdata(function (data){
    console.log(data);//在外部获取异步的数据
})

4、同步 JS单线程 同步会报错

var data=null;
varhttp=new XMLHttpRequest();
http.open("get","./list/data,txt",false);
http.send();
http.onreadystatechange=function(){
    if(http.readyState==4&&http.status==200){
        console.log(1);//报错
    }
}
console.log(2);//输出2

5、ajax封装

function method(res,url,data,callback){
    var http=new XMLHttpRequest();
    if(res=="get"){
    //get方式传值是在路径之后拼接数据
        if(data){
            url+="?";
            url+=data;
        }
        http.open(res,url);
        http.send();
    }else{
        http.open(res,url);
        if(data){
            http.send(data);//post在send上发送数据
        }else{
            http.send();
        }
    }
    http.onreadystatechange=function(){
        if(http.readyState==4&&http.states==200){
            callback(http.response);
        }
    }
}
method("get","./list/data.txt",null,function(data){
    console.log(data);
})

6、跨域
协议 主机名 端口 不同在访问数据时就会出现跨域
http(协议)?/stroe.company.com(主机名)/dir2/other.html
①jsonp跨域 也就是src跨域
通过传递回调函数来返回数据
我们打开Apache MySQL环境 创建一个数据表 用PHP连接数据库返回数据
localhost:8080/data.php即可查看PHP返回的数据库数据

var http=new XMLHttpReaquest();
http.open("post","http://localhost:8080/data.php");
http.send();
http.onreadystatechange=function(){
    if(http.readyState==4&&http.status==200){
    console.log(JSON.parse(http.response));
    }
}
//跨域报错

jsonp跨域
在PHP文件中

$callback =$_GET['callback'];
$data=array(...);
echo $callback.'('.json_encode($data).')';

<script src="http://localhost:8080/data.php?callback=dosome"></script>
<script>
function dosome(data){
    console.log(data);
}
</script>

②CROS跨域 跨域资源共享
配置PHP后台允许跨域<?php header('Access-Control-Allow-Origin:*');*允许所有域名访问
mysql乱码 set names ‘gbk’;
把请求代码写好

var http=new XMLHttpRequest();
http.open("post","http://localhost:8080/data.php");
http.send();
http.onreadystatechange=function(){
    if(http.readyState==4&&http.status==200){
        console.log(http.response);
    }
}

7、调用百度的搜索接口代码

<div><input id="sear" type="text"/></div>
<ul class="menu">
</ul>
<script>
var sear=document.querySelector("#sear");
sear.onkeyup=funciton(){
    //生成一个script标签
    var script=document.createElement("script");
    script.src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/?wd="+this.value+"&cb=showdata";
    document.body.appendChild(script);
}
function showdata(data){
    //console.log(data);
    for(var i=0;i<data.s.length;i++){
        var li="<li><a href='https://ww.baidu.com/s?wd="+data.s[i]"'></a></li>";
        menu.innerHTM+=li;
    }
}
</script>