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>