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).')';

②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>