ajax(五)

什么是AJAX？提供用户体验，较少网络数据的传输量。

与服务器交换数据，不刷新整个页面？

  send要写在open的下面，send要写在最下面，不然会有BUG。

同源策略是浏览器的一种安全策略，所谓同源是指，域名，协议，端口完全相同。

 

1.  什么是跨域及跨域的两种形式。

        什么是跨域，跨域分为几种情况

        从a 站点的js 代码想去访问b 站点的资源，这个时候 就是跨域

     跨域是浏览器默认的一种安全策略行为。

2.         跨域的两种形式：

        第一种：a 站点 想访问b 站点的dom 元素

   domain可返回下载当前文档的服务器域名  

    document.domain

 我要保证不跨域

        就是我www.taobao.com 下面去请求一个页面，然后我在这个页面的通过js 去访问另外的一个站点的资源。我们必须保证协议，端口，域名完全匹配.访问这个页面www.taobao.com/day11/code/02corss.html，我在这个页面用iframe 去嵌入www.taobao.com/day11/code/03corss.html，不跨域，也就是说我在

www.taobao.com/day11/code/02corss.html，通过我的js 可以去访问www.taobao.com/day11/code/03corss.html的资源.

       我http://www.taobao.com/day11/code/01cross/04cross.html 访问一个页面。然后我在这个页面里面去嵌入另外一个页面，http://itcast.taobao.com/05cross.html， 现在跨域没有。能不能访问，不能访问，能不能解决，能解决，为什么能解决，因为主域名相同

         所以我们能解决：怎么解决:

         在每个页面添加一个js 代码声明，声明这个主域名

      1、顶级域名相同的可以通过domain.name来解决，即同时设置 domain.name = 顶级域名（如example.com）  document.domain="taobao.com";

跨域方案

 

       2、document.domain + iframe

3、window.name + iframe

4、location.hash + iframe

5、window.postMessage()

参考资料

http://rickgray.me/2015/09/03/solutions-to-cross-domain-in-browser.html

 

        第二种：在a 站点使用xmlHttpRequest 对象去访问b 站点的资源。

        原理如下：                      JSONP

我在a 站点想使用   xmlHttpRequest 发请求，浏览器是禁止的.我们使用jQuery 的是怎么做的

dataType:"jsonp"底层是使用script 标签发送请求，给服务端一个回调函数.

     原理：

跨域，所以我们不能访问.

    在jQuery 里面怎么处理，我们使用dataType:"jsonp"处理这个东西. 要知道原理，使用XMLHttpRequest 对象浏览器是禁止跨域访问的.

    我们在页面上面发送请求,点击超链接，表单提交，地址栏输入

    在页面上面发送请求

        <script src="">

        <link href="">

        <img src="">

    也是发送请求.

        我们之前script 标签要求服务端返回js，客户端浏览器按照js 的方式去解析

            link 标签 href 要求服务端返回css 样式。客户端浏览器按照css 的方式去解析

            img src 地址要求服务端返回一张图片   客户端按照图片的方式去解析.

//下面分别是两种发送参数和不发送参数的情况，都可以

 

     我刚刚使用

     $.ajax({

         url:"http://www.baidu.com"

     })

     这个方法底层使用XMLHttpRequest 对象

     现在是因为跨域了，浏览器对这个对象XMLHttpRequest 有限制。 不能访问.

     $.ajax({

              url:"http://www.baidu.com"

              dataType:"jsonp"

      })

      我们发现可以实现访问了，

底层是这样的？创建一个script 标签，srcipt.src="http://www.baidu.com/adsfadsf.php?callback="; //这个地址跟路径后缀没有任何关系

      //接下来是我要通过js 怎么去接收到服务端返回的数据的问题.

      srcipt.src="http://www.baidu.com/adsfadsf.php?callback=";

      发送请求，服务器返回数据，返回的数据浏览器默认是使用js 的方式去解析数据

      现在是我要通过javascript 代码去接收到服务端返回的数据.

      $.ajax({

          url:"http://www.baidu.com"

      })

      因为我是从www.taobao.com 下面获取到的一个页面

      因为去请求另外一个站点，

       $.ajax()

      底层使用的是XMLHttpRequest

      浏览器会有跨域限制

      所以dataType:jsonp   底层创建一个script 标签。 src="http://www.baidu.com/demo.php"

      而且浏览器不会禁止这个标签的跨域行为，

      现在我的跨域请求可以通过这个标签进行发送

      但是这个标签发送请求之后，服务器返回的数据，

      客户端浏览器直接使用js 去解析

      这个时候我的目的是想要得到服务端的数据。然后通过我自己写的js 代码去解析

      这个时候我就给服务端传递了一个callback 回调函数。

      服务端返回的是回调函执行的代码，并且把数据作为回调函数的参数传递过来的.

 

3.  跨域以及iframe标签

    frameborder="0"   

 

this.contentWindow.document=this.contentDocument，都是找到嵌入页面的document。

3. 跨域及iframe标签

 

<script>

function getInfo(obj){

alert(obj);

}

//这种方式，服务端必须返回json 格式的数据

window.οnlοad=function(){

var script=document.createElement("script");

script.src="https://sug.so.360.cn/suggest?callback=getInfo&encodein=utf-8&encodeout=utf-8&format=json&fields=word,obdata&word=ahaha";

document.body.appendChild(script);

}

</script>

    如果getInfo(){}这个函数写在wndow.onload那个函数里面的话，就成了那个函数的内部私有函数。浏览器一拿到数据就调getInfo，就调不到了。类似于下面那种，这样调不到

 

1.  获取天气查询案例

 有的接口默认给我们XML格式的

 加&output=json  会返回给json格式的我们

2.  获取天气查询案例

    var html = ...

 $("table").html(html);  把html放进这个table中   没有值的话是查询,返回内容

3.  接口返回的数据是这里是一个数组，数组里是一个对象，

 

这儿echo的双引号里再用双引号不行，得用单引号

echo "alert("haha")";   错的                  echo "alert('haha')";   对的

1.   瀑布流布局JQ的插件拓展

   匿名函数的自调用    匿名函数自调(function(){

})()       立即执行，只执行一次

固定用法(function($){

      $.fn.waterFall=function(){}

})(jQuery)

  $.fn是固定写法    传形参$进来，$的方法

jQuery是实参，它是上面引用的jQ文件里的jQuery对象。

2.  瀑布流里面

     图片获取需要时间，获取文档里图片的高度的时候，图片没加载出来，所以会出问题。而实际开发中，服务器传来的图片带有宽高。不同的图片会带有不同的宽高。

3. 瀑布流末尾的加个判断不发送请求。可以加个样式，在底下点击的时候如果没有数据了就移除样式，没有那个样式了就判断return。或者判断字的内容？

4.  获取每个小图片盒子的宽度

    var childrens=$item.children();//所有的小图片盒子

    var width=childrens.width();//注意这里，计算每个自盒子的宽度

动态的瀑布流获取数据

data.php

 file_get_contents()将一 将整个文件读入一个字符串

json_decode()接受一个 JSON 格式的字符串并且把它转换为 PHP 变量

json_encode()返回 value 值的 JSON 形式

array_slice()返回根据 offset 和 length 参数所指定的 array 数组中的一段序列。

  

8.  each(callback)

里面的this指的是DOM对象，要jQ对象的话用$(this)

可以使用return false来提前跳出循环

 

index是索引，dom是里面的每一个DOM对象。

 

跨域：

     从a 站点的js 代码想去访问b 站点的资源，这个时候 就是跨域

     跨域是浏览器默认的一种安全策略行为。

     跨域了有两种

        a 站点 想访问b 站点的dom 元素

             bj.itcast.cn  / gz.itcast.cn 下面的dom 元素

             这个我们是可以解决，什么主域名相同

             两个页面

             document.domain=itcast.cn

             http://www.itcast.cn  去访问 http://www.danei.com 下面的资源

             不允许访问的

        在a 站点使用xmlHttpRequest 对象去访问b 站点的资源.

             我在a 站点想使用   xmlHttpRequest 发请求，

             浏览器是禁止的.

             我们使用jQuery 的是怎么做的

             dataType:"jsonp"

             底层是使用script 标签发送请求，给服务端一个回调函数.

百度天气预报调用：

             使用模板去解析数据.

瀑布流：

跨域方案  http://rickgray.me/2015/09/03/solutions-to-cross-domain-in-browser.html