ajax跨域两个方法
1在后端转换，调用API.
ajax瀑布流：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#ul1{
width: 1000px;
margin: 100px auto;
/*border: 1px solid #d8d8d8;*/
}
#ul1 li{
list-style: none;
width: 227px;
float: left;
margin-right: 10px; }
#ul1 li div{
margin-bottom: 10px;
border: 1px solid #000;
box-sizing: border-box;
}
#ul1 li img{
width: 225px; }
</style>
<script type="text/javascript">
// 封装ajax方法
function ajax(method, url, data, success) {
var xhr = null;
try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
} if (method == 'get' && data) {
url += '?' + data;
} xhr.open(method,url,true);
if (method == 'get') {
xhr.send();
} else {
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
xhr.send(data);
} xhr.onreadystatechange = function() { if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
success && success(xhr.responseText);
} else {
alert('出错,Err：' + xhr.status);
}
} }
}
</script>
<script type="text/javascript">
window.onload=function(){ //1.初始化数据
var oUl=document.getElementById('ul1');
var aLi=oUl.getElementsByTagName('li'); var page=1; var b=true;
//var aLiLen=aLi.length; //2.通过数据文件接口getPics.php获取到数据，然后插入到li里面。
getlist(); function getlist(){
ajax('get','getPics.php','cpage='+page,function(data){ //var data=eval(data);
var data = JSON.parse(data); for(var i=0;i<data.length;i++){
var index2=getShort(); //通过一个函数，得到最短的li索引 var oDiv=document.createElement('div');//创建div节点 var oImg=document.createElement('img');//创建img节点
oImg.src=data[i].preview; //为新img节点增加src。宽高
oImg.style.width='225px';
oImg.style.height=data[i].height*(225/data[i].width)+'px';
oDiv.appendChild(oImg); //将img节点插入到div节点里面 var oP=document.createElement('p'); //新建p节点
oP.innerHTML=data[i].title;
oDiv.appendChild(oP); aLi[index2].appendChild(oDiv); //将新建的div节点插入到最短的li里面 } b=true; });
} //3.构造函数，对比得到最短的li，并且返回这个li的下标。
function getShort(){
var index=0;
var iH=aLi[index].offsetHeight; for(var i=1;i<aLi.length;i++){
if(aLi[i].offsetHeight<iH){
index=i;
iH=aLi[i].offsetHeight;
}
} return index;
} window.onscroll=function(){ var index2=getShort();
var oLishort=aLi[index2]; var scrollTop=document.documentElement.scrollTop || document.body.scrollTop; if((oLishort.offsetTop+oLishort.offsetHeight)<document.documentElement.clientHeight+scrollTop){
//alert('该加载了');
if(b){
b=false;
page++;
getlist();
} }
}; };
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
<?php
header('Content-type:text/html; charset="utf-8"'); /*
API:
getPics.php 参数
cpage : 获取数据的页数
*/
$cpage = isset($_GET['cpage']) ? $_GET['cpage'] : 1; $url = 'http://www.wookmark.com/api/json/popular?page=' . $cpage; $content = file_get_contents($url);
$content = iconv('gbk', 'utf-8', $content); echo $content; ?>
2 使用script标签向另一个域上的资源进行请求，传递参数fn，保存将来要执行的js函数名。
搜索框：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
margin:30px;
}
*{
list-style:none;
}
#input{
color: lightcoral;
} a:hover{
color: lightgreen;
}
a{
text-decoration: none;
color: lightcoral;
}
</style>
<script type="text/javascript">
window.onload=function(){
var input=document.getElementById("input");
input.onkeyup=function(){
var newScript=document.createElement("script");
newScript.src='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+input.value+'&cb=fn';
document.body.appendChild(newScript);
} //
}
</script>
<script type="text/javascript">
function fn(data){
console.log(data);
// var newli=document.createElement("li");
var d=data.s[4];
var arr=data.s;
var len=arr.length;
console.log(len);
var html='';
for(var i=0;i<len;i++){
// var newli=document.createElement("li");
html+='<li><a href="https://www.baidu.com/s?wd='+arr[i]+'" target="_blank">'+arr[i]+'</a></li>'; }
var infoContainer=document.getElementById("infoContainer");
infoContainer.innerHTML=html;
console.log(d);
}
</script>
</head>
<body>
<div id="wrap">
<input type="text" name="" id="input" />
<ul id="infoContainer"> </ul>
</div>
</body>
</html>
调用百度接口，效果：
3 h5 xhr2方法
ajax跨域两个方法的更多相关文章
- 第114天：Ajax跨域请求解决方法（二）
一.什么是跨域 我们先回顾一下域名地址的组成: http:// www . google : 8080 / script/jquery.js http:// (协议号) www (子 ...
- 第113天：Ajax跨域请求解决方法
一.原生JS实现ajax 第一步获得XMLHttpRequest对象 第二步:设置状态监听函数 第三步:open一个连接,true是异步请求 第四部:send一个请求,可以发送一个对象和字符串,不需要 ...
- AJAX跨域的常见方法
由于在工作中需要使用AJAX请求其他域名下的请求,但是会出现拒绝访问的情况,这是因为基于安全的考虑,AJAX只能访问本地的资源,而不能跨域访问.比如说你的网站域名是aaa.com,想要通过AJAX请求 ...
- jquery Ajax跨域调用WebServices方法
由于公司需要开发一个手机页面,想提供给同事直接在手机上可以查询SAP资料.数据需要使用js调用webserver来获取. 因为初次使用Jquery调用Webserver,所以期间并不顺利.测试调用We ...
- Ajax跨域访问问题-方法大全
Case I. Web代理的方式 (on Server A) 即用户访问A网站时所产生的对B网站的跨域访问请求均提交到A网站的指定页面,由该页面代替用户页面完成交互,从而返回合适的结果.此方案可以解决 ...
- ajax 跨域 4种方法
一,传统的ajax方法 1,js代码 查看复制打印? $("#ajax").click(function(){ $.ajax({ type: "POST", u ...
- Ajax跨域请求action方法，无法传递及接收cookie信息（应用于系统登录认证及退出）解决方案
最近的项目中涉及到了应用ajax请求后台系统登录,身份认证失败,经过不断的调试终于找到解决方案. 应用场景: 项目测试环境:前端应用HTML,js,jQuery ajax请求,部署在Apache服务器 ...
- WebApi Ajax 跨域请求解决方法（CORS实现）
概述 ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.但是在使用API的时候总会遇到跨域请求的问题, 特别 ...
- WebApi Ajax 跨域请求解决方法（CORS实现）（作者：jianxuanbing）
概述 ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.但是在使用API的时候总会遇到跨域请求的问题,特别各 ...
随机推荐
- C# 目录下的文件操作
运用DirectoryInfo类的对象我们可以轻松的实现对目录以及和目录中的文件相关的操作,假如你要获得某个目录F:\Pictures下的所有BMP文件,那么通过下面的代码就可以实现该功能. 上面的代 ...
- iOS开发——应用间跳转
iOS开发过程中,我们经常碰到应用间跳转的情景: 1.使用第三方用户登录,跳转到需授权的App或跳转到分享app的对应页面 *需要用户授权,还需要"返回到调用的程序,同时返回授权的用户名.密 ...
- SpingBoot之多Profile文件
1.我们在主配置文件编写的时候,文件名可以是 application-{profile}.properties/yml默认使用application.properties的配置: 在我们的项目开发.测 ...
- MySQL自学笔记_联结（join）
1. 背景及原因 关系型数据库的一个基本原则是将不同细分数据放在单独的表中存储.这样做的好处是: 1).避免重复数据的出现 2).方便数据更新 3).避免创建重复数据时出错 例子: 有供应商信息和产 ...
- 【Django】Django中的模糊查询以及Q对象的简单使用
Django中的模糊查询: 需要做一个查找的功能,所以需要使用到模糊查询. 使用方法是:字段名加上双下划线跟上contains或者icontains,icontains和contains表示是否区分大 ...
- 【Django】Django开发中的日志输出
开发环境:Ubuntu16.04+Django 1.11.9+Python2.7 一:使用自定义函数输出日志到log文件: import time def print_log(log): file_o ...
- ThinkPHP邮件发送S（Smtp + Mail + phpmailer）
三种邮件发送介绍:(Smtp,Mail以及phpmailer)ThinkPhp 框架下开发. 邮件发送配置先前准备(用该账号做测试用):(这里用新浪邮箱服务器)将自己的新浪邮箱开通 POP3/SMTP ...
- 2019年Vue学习路线图
https://juejin.im/entry/5c108864f265da61726555ed 官网: https://cn.vuejs.org/index.html js引入地址 https:// ...
- Mybaitis 与jdbc
jdbc读取数据库从resultSet中遍历结果集,存在硬编码(写死的),不利于系统维护,所以最好能将结果集自动映射成java对象 由此产生了mybatis.
- django开发傻瓜教程-1-安装和HelloWorld
安装 sudo pip install Django 新建项目 django-admin startproject XXX 启动项目 进入主目录下 python manage.py runserver ...