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>

JavaScript 阿贾克斯相关推荐

JavaScript中的HTTP GET请求？
我需要在JavaScript中执行HTTP GET请求. 最好的方法是什么? 我需要在Mac OS X破折号小部件中执行此操作. #1楼上面有很多很棒的建议,但不是很可重用,并且经常被DOM废话和其 ...
ajax 成功回调函数,jQuery的阿贾克斯成功回调函数定义jQuery的阿贾克斯成功回调函数定义(jQuery ajax...
我想使用jQuery的ajax从服务器获取数据. 我希望把成功的回调函数定义外面.ajax()块像下面这样. 所以,我需要声明变量dataFromServer像下面这样我就能从成功回调使用返回的数据? ...
如何使用JavaScript获取客户端的IP地址？
我需要以某种方式使用JavaScript检索客户端的IP地址: 没有服务器端代码,甚至没有SSI. 但是,我不反对使用免费的第三方脚本/服务. #1楼在您的页面中包含以下代码: <script ...
javascript复习(更新)
认识 JS + 什么是 JS? => 在页面内 -> html: 页面结构(表示了你的页面内有什么) -> css: 页面样式(表示了你的页面中每一个内容是什么样子的, 在什么位置) ...
Tabulator 易于使用、功能齐全、交互式表格 JavaScript 库
Tabulator 跨浏览器支持 Tabulator 支持所有主流浏览器 Tabulator 旨在支持所有现代桌面和移动 Web 浏览器框架支持 Tabulator 适用于所有 JS 框架,包括: ...
Tabulator javascript data grid数据表格控件v5.1.0 发布说明
发行说明编辑器配置文件导入阿贾克斯键绑定菜单分页列可移动行排序格式化数据树下载 Bug修复编辑器配置一个新的.editorconfig文件已添加到 Tabulator 项目 ...
Ajax（阿贾克斯）基础
*Ajax是什么? 1.Ajax就是让浏览器跟服务器交互的一套API. 它的作用就是可以让浏览器和服务器进行交互.( 是一种用于向服务器请求数据的技术 ) 2.MDN官网传送门:Ajax - Web ...
1.$是什么 2.阿贾克斯是什么，怎么创建和优点
阿贾克斯是什么,怎么创建和优点 1.AJAX 简介 AJAX(音译为:阿贾克斯) = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML),是指一 ...
java 阿贾克斯怎么写_阿贾克斯
java 阿贾克斯怎么写杰西·詹姆斯·加勒特(Jesse James Garrett)和Adaptive Path的团队创造了简称" Ajax",意指所有人都在进行的所有酷炫的D ...

JavaScript 阿贾克斯

JavaScript 阿贾克斯相关推荐

最新文章

热门文章