封装Ajax与跨越

最新推荐文章于 2022-07-05 08:58:56 发布

柳LL

最新推荐文章于 2022-07-05 08:58:56 发布

阅读量159

点赞数

本文链接：https://blog.csdn.net/yllmyl/article/details/80273860

版权

1.原生的ajax请求

var xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("");

xhreadystatechange =function( ){

if(xhr. readyState ==4){

if(xhr.status ==200){

console.log(JSON.parse(xhr.responseText));

}else{

console.log(xhr.statusText);

}

xhr.open('请求类型get/post',请求地址url',true);

xhr.setRequestHeader('Content-Type','application/json');

xhr.send(如果post请求则在这些formData);

jQuery 中的$.ajax();请求

<script src='xxx/jquery1.12.3.min.js'></script>

<script>

$.ajax({

type:'get/post',

url:'http//xxx/xx.php',

dataType:'json',

data:'如果是post请求则必须写

success:function(jsonData){

console.log(jsonData);

},

error:function(err){

console.log(err);

}）；

</script>

2.封装Ajax

（1）提供创建xhr对象的兼容性函数

function createXhr()

return window.XMLHttpRequest():new ActiveXObject(");

}
（2）提供发送请求的对外接口

function ajax(jsonObj){}
（3）设计并约定对外接口的参数规格

method:'get/post'

data:若无参数可以不写

async:true

url:后台url地址

success:function

error:function
（4）实现对外接口中参数处理

function ajax(jsonObj){

var xhr = createXhr();

另一种方式 function params(data){

var arr = [];
for(var i in data){
arr.push(i+"="+data[i]);
}
return arr.join("&");
}
jsonObj.data = params(jsonObj.data);

}

if(obj.method === "get"){
obj.url += obj.url.indexOf("?")==-1
?"?"+jsonObj.data
: "&"+jsonObj.data;
}
（5）实现对外接口中响应处理

function ajax(jsonObj){

if(jsonObj.async === true){

xhr.onreadystatechange = function(){

if(xhr.readyState ==4){

if(xhr.status ==200){

jsonObj.success(JSON.parse

(xhr.responseText));

}else{

jsonObj.error(xhr.statusText);

}

if(jsonObj.async ==false){

jsonObj.error(xhr.statusText);

}

（6）实现对外接口中发送处理

调用open+send函数

function ajax(jsonObj){

xhr.open(obj.method.obj.url.obj.async);

if(obj.method ==="post"){ x xhr.setRequertHeader('Content-Type',

'application/x-www-form-urlencoded');

xhr.send(obj.data);

}else{

xhr.send();

}

}
（7）设置命名空间，避免全局变量污染。

因为我们所编写的js文件中存在大量全局变量，而这样的全局变量会对其他文件中的内容造成不可预估的影响。在js中函数可以划分作用域，因此我们采用自执行函数将整体包裹，避免了内部创建的变量对全局变量造成的影响。
但是这样一来带来的一个重要问题就是，内部创建的函数对外也变成了不可见状态，因此我们可以借助window对象来将内部创建的对外接口设置为“可见状态”.

（function(）{

//...

function ajax(){

//...

}

window.ajax =ajax;

}());

案例：使用自封装Ajax

<html>

< meta charset='utf-8'>

<style>

.getDiv,.postDiv{

display:inline-block;

border:1px solid black;

margin: 10px;

padding:20px;

}

</style>

</head>

<body>

<span>get uname:</span><input type ='text' class='uname'>

<br/>

<span>get upass:</span><input type ='text' class='upass'>

<br/>

<button class='get_no'>send Get without params</button>

<button class='get_yes'>send Get with params</button>

</div>

<br/>

<span>post uname:</span><input type ='text' class=' post_uname'>

<br/>

<span>post upass:</span><input type ='text' class='post_upass'>

<br/>

</div>

var getUnameInput=document.querySelect('.uname');

var getUpassInput=document.querySelect('.upass');

var postUnameInput=document.querySelect('.post_uname');

var postUpassInput=document.querySelect('.post_upass');

var get_noBtn=document.querySelect('.get_no');

var get_yesBtn=document.querySelect('.get_yes');

var post_yesBtn=document.querySelect('.post_yes');

get_noBtn,onclick = function(){

frankAjax({

method:"get",

url:"xxx.php,

async:true,

data:{},

success:function(response){

console.log(response);

}

});

get_yesBtn,onclick = function(){

frankAjax({

method:"get",

url:"xxx.php,

async:true,

data:{

uname:getUnameInput.value,

uname:getUpassInput.value

success:function(response){

console.log(response);

}

});

post_yesBtn,onclick = function(){

frankAjax({

method:"post",

url:"xxx.php,

async:true,

data:{

uname:getUnameInput.value,

uname:getUpassInput.value

success:function(response){

console.log(response);

}

});

</script>

</body>

</html>

4.案例：动态加载瀑布流

要求：
(1)整体html结构和js部分都和之前的代码没有冲突和区别
只是需要将【原本的模拟数据】变成【真正的Ajax请求来的数据】。
(2)对于获取数据而言，采用get请求。
(3)最后需要将整个处理瀑布流加载过程的代码，放置到success中执行
(4)php后台文件中只需要将图片的路径地址构建，并返回即可。

$imgArr = [‘http://127.0.0.1/waterfall/i1.jpg’,‘http://127.0.0.1/waterfall/i2.jpg’,…];
$finalArr = array('desc'=>'success', 'imgArr'=>$imgArr);
echo json_encode($finalArr);

ajax({
method:'get',
url:'waterfall.php',
async:true,
success:function(data){
//…构建瀑布流的代码
},
error:function(error){
console.log(error);
}

});

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<style>
.out{
position:relative;
margin: 0 auto;
}
.in{
float:left;
}

img{
margin:10px;
padding:10px;
border-radius:10px;
border:1px solid #e67e22;
box-shadow: 0 0 5px skyblue;
}

</style>

</head>
<body>
<div class='out'></div>
<script type="text/javascript" src="lesson4_testFrankAjax/EncapsulationAjax"></script>
<script type="text/javascript">
frankAjax({
method:'get',
url:'encapsulation.php',
async:true,
data:{},
success:function(response){
var imgArr =response.imgArr;
var outDiv=document.querySelector('.out');

for(var i=0;i<imgArr.length; i++){
var div = document.createElement('div');
div.setAttribute('class','in');
div.innerHTML = '<img src="'+imgArr[i]+'" alt="">';
outDiv.appendChild(div);
}

var inDivs = document.querySelectorAll('.in');
var num = Math.floor(document.documentElement.clientWidth/
inDivs[0].offsetWidth);
outDiv.style.width = num*inDivs[0].offsetWidth+'px';
var heightArr = [];
for(var j=0; j<inDivs.length; j++){
if(j<num){
heightArr.push(inDivs[j].
offsetHeight);
}else{
inDivs[j].style.position = 'absolute';
var minHeight = Math.min.apply(null,heightArr);
var minIndex = heightArr.indexOf(minHeight);
inDivs[j].style.top = minHeight+'px';
inDivs[j].style.left = inDivs[minIndex]+inDivs[j].offsetHeight
heightArr[minIndex] = heightArr[minIndex] + inDivs[j].offsetHeight;
}
}
}
});
</script>
</body>
</html>

<?ph

//$success = array('msg'=>'ok','info'=>$_POST);
$success = array('msg'=>'ok','info'=>$_GET);
echo json_encode($success);
?>

5.跨域

（1）浏览器同源正策

含义：最初的目的是某页面所设置的cookie，只能由其“同源”页面打开。
说明：“同源”：协议相同、域名相同、端口相同
例子：http://www.frank.com/sxt/page.html这个网址
协议是：http://
域名是：www.frank.com
端口是：80（默认端口可以省略）。

它的同源情况如下：
http://www.frank.com/sxt2/other.html：同源
http://frank.com/sxt/other.html：不同源（域名不同）
http://v3.www.frank.com/sxt/other.html：不同源（域名不同）
http://www.frank.com:81/dir/other.html：不同源（端口不同）

(3)JSONP跨域方式
描述：JSONP是服务器与客户端跨源通信的最常用方法。
最大特点就是简单适用，老式浏览器全部支持，对服务器改造非常小。
本质：实际上利用了script标签引入js文件，并解析执行的原理。
语法：
(1)在html中插入script标签，并利用script标签发起跨源请求
var script = document.createElement('script');
script.setAttribute("type","text/javascript");
script.src = '跨源url地址?【前后端约定回调关键词】=【回调函数名】';
document.body.appendChild(script);
(2)在服务器对应php文件中通过拼接字符串，模拟函数调用。
并将要返回数据通过回调函数参数返回。
$response = $_GET['前后端约定回调关键词'];
echo $response."(".json_encode(要返回数据).")";
(3)在html页面中，显式写出回调函数。这样当跨源请求完成后对应回调函数会自动执行。
function 回调函数名(data) {
console.log(data);
};

柳LL

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
封装Ajax与跨越

1.原生的ajax请求 var xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject(""); xhreadystatechange =function( ){ if(xhr. re...
复制链接

扫一扫