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跨域两个方法的更多相关文章

  1. 第114天：Ajax跨域请求解决方法（二）

    一.什么是跨域 我们先回顾一下域名地址的组成: http:// www . google : 8080 / script/jquery.js   http:// (协议号)       www  (子 ...

  2. 第113天：Ajax跨域请求解决方法

    一.原生JS实现ajax 第一步获得XMLHttpRequest对象 第二步:设置状态监听函数 第三步:open一个连接,true是异步请求 第四部:send一个请求,可以发送一个对象和字符串,不需要 ...

  3. AJAX跨域的常见方法

    由于在工作中需要使用AJAX请求其他域名下的请求,但是会出现拒绝访问的情况,这是因为基于安全的考虑,AJAX只能访问本地的资源,而不能跨域访问.比如说你的网站域名是aaa.com,想要通过AJAX请求 ...

  4. jquery Ajax跨域调用WebServices方法

    由于公司需要开发一个手机页面,想提供给同事直接在手机上可以查询SAP资料.数据需要使用js调用webserver来获取. 因为初次使用Jquery调用Webserver,所以期间并不顺利.测试调用We ...

  5. Ajax跨域访问问题-方法大全

    Case I. Web代理的方式 (on Server A) 即用户访问A网站时所产生的对B网站的跨域访问请求均提交到A网站的指定页面,由该页面代替用户页面完成交互,从而返回合适的结果.此方案可以解决 ...

  6. ajax 跨域 4种方法

    一,传统的ajax方法 1,js代码 查看复制打印? $("#ajax").click(function(){ $.ajax({ type: "POST", u ...

  7. Ajax跨域请求action方法，无法传递及接收cookie信息（应用于系统登录认证及退出）解决方案

    最近的项目中涉及到了应用ajax请求后台系统登录,身份认证失败,经过不断的调试终于找到解决方案. 应用场景: 项目测试环境:前端应用HTML,js,jQuery ajax请求,部署在Apache服务器 ...

  8. WebApi Ajax 跨域请求解决方法（CORS实现）

    概述 ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.但是在使用API的时候总会遇到跨域请求的问题, 特别 ...

  9. WebApi Ajax 跨域请求解决方法（CORS实现）（作者：jianxuanbing）

    概述 ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.但是在使用API的时候总会遇到跨域请求的问题,特别各 ...

随机推荐

  1. 关于后台获取不到HiddenField值的有关问题

    服务器加载aspx程序时,首先要执行后台cs文件中的page_load等方法中的代码,其它按钮事件等是不执行的,生成页面发送到客户端.客户端执行时会响应js脚本,提交到服务器后除了执行page_loa ...

  2. Math类小结

    package com.swift; public class MathDemo { public static void main(String[] args) { // TODO Auto-gen ...

  3. 【PHP】php中json_decode()和json_encode()

    1.json_decode() json_decode (PHP 5 >= 5.2.0, PECL json >= 1.2.0) json_decode — 对 JSON 格式的字符串进行 ...

  4. PHP 批量操作 Excel

    自己封装了一个批量操作excel文件的方法,通过xls文件地址集合遍历,第三个参数传入一个匿名函数用于每个需求的不同进行的操作,实例中我想要得到列表中含有折字的行,封装成sql语句返回. xls文件超 ...

  5. 第11课 文章分类(组件化开发) Thinkphp5商城第四季

    目录 思路: 控制器里 扩展类里: 视图层: 思路: 控制器查出所有数据后调用扩展类里的无限级分类 public function catetree($cateRes) 方法. 把排序好的数据传给视图 ...

  6. 浅谈MapReduce工作机制

    1.MapTask工作机制 整个map阶段流程大体如上图所示.简单概述:input File通过getSplits被逻辑切分为多个split文件,通通过RecordReader(默认使用lineRec ...

  7. psutil——获取系统信息的Python第三方模块

    本文摘自廖雪峰大神个人网站:https://www.liaoxuefeng.com/wiki/1016959663602400/1183565811281984 用Python来编写脚本简化日常的运维 ...

  8. vscode添加Astyle

    1.安装astyle插件,在应用商城里面一键安装即可.2.下载astyle的bin文件,并添加到系统环境变量.3.打开vscode的settings.json,添加以下代码. { "edit ...

  9. C++ 11 从C++ primer第五版的学习笔记

    1. auto (page107) auto 推断会忽略const   const int ci = i, & cr = ci; auto b = ci; // b is an int (to ...

  10. CodeForces 781E Andryusha and Nervous Barriers 线段树 扫描线

    题意: 有一个\(h \times w\)的矩形,其中有\(n\)个水平的障碍.从上往下扔一个小球,遇到障碍后会分裂成两个,分别从障碍的两边继续往下落. 如果从太高的地方落下来,障碍会消失. 问从每一 ...