JS_Ajax基础

Ajax详解与实践

最新推荐文章于 2024-06-19 11:25:09 发布

转载最新推荐文章于 2024-06-19 11:25:09 发布 · 50 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/shaoshuai0305/p/6001562.html

文章标签：

#javascript #json #php #ViewUI

一:Ajax
ajax 的全称是Asynchronous(异步) JavaScript and XML
在不刷新页面的情况下从服务器获取，提交数据的一种数据交互方式;

二：Ajax使用步骤概括

//1：创建Ajax对象
var xhr;
     //浏览器兼容问题解决
if(window.XMLHttpRequest){
     xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject('Microsoft.XMLHTTP'); } //或者 var xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft XMLHTTP'); //2：配置 Ajax请求地址 xhr.open('get','index.xml',true); //3：发送请求 xhr.send(); //4:接收服务器返回数据 xhr.onreadysatechange=function(){ if(xhr.readySates==4&&xhr.status==200) console.log(xhr.responsetXML) }

三：Ajax使用步骤分析：

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>ajax</title> <script> //网络数据请求工具 ，数据类型一般有：(json|xml) //如何拿：创建对象+配置方法open+send请求发送给服务器 //监听数据状态， onreadystatechange 判断状态，服务器默认get请求|若用POST请求出错500，请求方式由服务器来定， //一:创建Ajax对象 // 1.1定义变量，用来保存创建出的对象，(XMLHttpRequest); var xhr; //1.2：根据浏览器支持标准。创建对象。 //判断当前浏览器是否具备XMLHttpRequest if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ //IE5|6|7 使用ActiveXobject创建 //Ajax组件放在ActiveXObject组件库中，需传入'Miscrosoft.XMLHTTTP'才能返回Ajax组件 xhr = new ActiveXObject('Microsoft.XMLHTTP'); } //二：配置Ajax请求地址 // ======================post请求===================================== //配置请求信息 //open三个参数() //1:设置请求方式get|post //2:设置请求数据的接口地址 //3:设置请求是否是异步请求(异步请求:请求发送后，不等待请求数据，先执行其他任务，当数据达到本地在处理) 默认是：true为异步 // xhr.open('post','index.html',true); // post请求参数问题，把post请求所需的参数，放到send()中 // 若其参数有中文字符，将其转码为unicode并拼接如下 // xhr.send('user=lemon&password=23'); // xhr.send('user='+encodeURI('中文')+'password=23'); //POST请求参数中有中文，都要使用encodeURI进行转码 //POST参数放置问题 需要将参数丢掷send中 //GET参数send参数为null send() 为了所有服务器能正确识别，传值为null //===========================get请求============================= //若有参数拼接到url中，多个数据之间使用&&连接 //缓存规避 //get请求中：若每次请求为同一个接口，浏览器将从缓存中取数据，而不是服务器；如果服务器中接口数据内容改变，则就拿不到新数据。 所以在请求接口后拼接一个随机数参数，这样浏览器每次拿到接口在缓存中都找不到这个接口对应数据，这样就会从服务器中读取数据， 而服务器端并没有开设接收随机数参数的字段，所以get发送过来的随机数将被服务器丢弃，只能返回处理的接口数据； // xhr.open('get','myX.ML.xml'+Math.random(),true); xhr.open('get','myJSON.json',true); //三：发送数据 xhr.send(null);//严谨写法null //四:监听数据传输情况 //如何判断数据有没有到达： //readySate值改变执行， xhr.onreadystatechange = function(){ if(xhr.readyState==4&&xhr.status==200){ //只有当readyState的值是4且status值是200，服务器数据才算发送到本地 //数据请求成功 //若数据是xml格式，数据返回保存到responseXML属性中，否则responseText; //请求数据是xml传输的时候，responseText把这些数据转化为字符串，但responseXML会把这些数据当成xml文档对象，再解析成字符串更方便； //若数据请求为json格式，respinseText会把数据转换成json字符串,responseXML并不会受到这些数据为null console.log(xhr.responseText);//json 收 console.log(xhr.responseXML);//xml 收 } } </script> </head> <body> </body> </html>

四：同源策略

所谓同源是指域名（主机名或者IP地址）、端口、协议相同。
不同的客户端脚本（JavaScript、ActionScript）在没明确授权的情况下，不能读取对方的资源。

同源策略：保护用户策略，比如：在建行中设置的信息，若想拿到缓存信息， 只能用同源网页进行访问。

Ajax只能访问同源接口

同源策略限制范围：
     1：本地缓存Cookie/localStorage/indexDB数据 
     2：不能互相访问dom节点  | 通过第一个js代码操作另一个html代码，同一家厂商生产，可以自定义修改，无安全隐患。
     3：ajax请求不能发送  | 保护自己公司数据 

同源判断：
URL 协议：主机名：端口 三者相同，才称之为同源；

结果  原因
http://store.company.com/dir2/other.html 成功 http://store.company.com/dir/inner/another.html 成功 https://store.company.com/secure.html 失败 协议不同 http://store.company.com:81/dir/etc.html 失败 端口不同 http://news.company.com/dir/other.html 失败 主机名不同

五：jsonp

在Ajax打破同源的限制
跨域

                //jsonp；利用script标签请求外服务器中数据，从而绕开同源策略对AJAX请求数据限制
                //一：创建javascript标签
                var script = document.createElement('script');
                script.type="text/javascript"; script.src="http://10.0.159.198/news.php?callback=foo";//传回调函数 document.getElementsByTagName('body')[0].appendChild(script);//写进文档流 //二：写回调函数 function foo(s){ alert(s); }

jsonp深入学习

六：综合示例：使用Ajax加载天气信息练习:

//Ajax.js
//ajax封装
 //传入参数：请求方式|请求接口地址|请求参数|请求成功回调函数|请求失败回调函数
function createAjax(method, url, data, successFun, failFun) { //1:根据浏览器支持情况创建 var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //2:判断请求方式类型 if(method.toUpperCase() == "GET") { //2.1请求为get时，配置请求参数，并发送 xhr.open('GET', url + "?" + data, true); xhr.send(null); } else if(method.toUpperCase() == "POST") { xhr.open('POST', url, true); xhr.send(data); } else { console.errr("error"); return; } //3：监听 xhr.onreadystatechange = function() { if(xhr.readyState == "4" && xhr.status == "200") { successFun(xhr.responseText); } else if(xhr.readyState == "4") { failFun('error'); } } } //jsonp封装 function createJsonp(srcString){ //封装好的JSONP 只能对接GET服务器 var script = document.createElement("script"); script.type="text/javascript"; script.src=srcString; document.getElementsByTagName("head")[0].appendChild(script); }

//weather.html
<!DOCTYPE html>
<html>
    <head> <meta charset="UTF-8"> <title>weather_ajax</title> <script type="text/javascript" src="Ajax.js"></script> <script type="text/javascript"> var murl = 'http://wthrcdn.etouch.cn/weather_mini'; var data = "city=原阳"; //调用封装好的ajax; createAjax('get', murl, data, successFun, failFun); function successFun(d) { console.log(d); } function failFun(d) { console.log(d); } //调用封装好的jsonp var strString="http://wthrcdn.etouch.cn/weather_mini?city=原阳&&callback=myfoo"; createJsonp(strString); function myfoo(d){ console.log(d); } </script> </head> <body> </body> </html>

对象式Ajax封装

//ajax.js
function ajaxFun(obj) { var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); var upperMethod = obj.method.toUpperCase(); if(upperMethod == "GET") { xhr.open("GET", obj.url + "?" + obj.data, true); xhr.send(null); } else if(upperMethod == "POST") { xhr.open("POST", obj.url, true); xhr.send(obj.data); } else { console.error("method error!"); return; } xhr.onreadystatechange = function() { if(xhr.readyState == 4) { if(xhr.status == 200) { obj.successFun(xhr.responseText); } else { obj.failFun('error'); } } } }

//html中调用
                var obj={
                    method:"GET",
                    url:"http://wthrcdn.etouch.cn/weather_mini",
                    data:"city=北京", successFun:function(d){ console.log(d); }, failFun:function(d){ console.log(d); } }; ajaxFun(obj);

ajax认知深入学习

转载于:https://www.cnblogs.com/shaoshuai0305/p/6001562.html