JSONP跨域请求任务说明.ppt

* * * * * 任务三：下拉菜单三级联动 jQuery操作Ajax 列举$.ajax()方法的3种常用方式 ③ 只配置setting参数，同样实现Ajax操作 setting参数还可以接收更多的可选值 例如：dataType表示要接收的数据格式，async表示异步或同步请求，cache表示是否缓存等。 任务三：下拉菜单三级联动 jQuery操作Ajax （4）ajaxSetup() 对于频繁与服务器进行交互的页面来说，每一次交互都要设置很多选项，这种操作不仅繁琐，也容易出错。为此，jQuery定义了ajaxSetup()方法，它可以预先设置全局Ajax请求的参数，实现全局共享。 任务三：下拉菜单三级联动 jQuery操作Ajax （4）ajaxSetup() 当使用$.ajaxSetup()方法预设异步交互中的通用选项后，再调用$.ajax()、$.get()、$.post()等方法执行Ajax操作时，只需要进行个性化参数设置即可。 任务三：下拉菜单三级联动 任务 实现 任务四：JSONP跨域请求 任务 说明 配置Apache服务器，准备一个虚拟主机“” 在当前网站下编写商品信息编辑页面，并通过JSONP进行跨域验证 请使用jQuery+JSON的方式，通过跨域请求重新实现任务一中的表单验证 引入知识点 任务四：JSONP跨域请求 1、Ajax跨域问题 2、通过PHP跨域请求 3、通过JSONP跨域请求 任务四：JSONP跨域请求 Ajax跨域问题 在网站开发中，有时需要将其他网站的内容异步的载入到自己的网站中，但是浏览器出于安全方面的考虑，禁止页面中的JavaScript访问其他服务器上的数据，即“同源策略”。 为了解决Ajax跨域问题，可以通过某些手段来绕过浏览器“同源策略”的限制，从而在浏览器端实现跨域名通信的效果。 引入知识点 任务四：JSONP跨域请求 1、Ajax跨域问题 2、通过PHP跨域请求 3、通过JSONP跨域请求 任务四：JSONP跨域请求 通过PHP跨域请求 （1）file_get_contents()函数 利用PHP的函数file_get_contents()实现跨域请求，就是通过此函数从给定的URL地址中获取内容，并将该内容输出，即可从浏览器端获取跨域请求的内容。 任务四：JSONP跨域请求 通过PHP跨域请求 （1）file_get_contents()函数 下面在当前网站 的index.html文件中，获取测试网站中的test.json文件内容。 任务四：JSONP跨域请求 通过PHP跨域请求 （1）file_get_contents()函数 浏览器端文件index.html 服务器端文件index.php 当前网站（）中的文件 任务四：JSONP跨域请求 通过PHP跨域请求 （1）file_get_contents()函数 测试网站（）中的文件 测试文件test.json 任务四：JSONP跨域请求 通过PHP跨域请求 （2）cURL库 PHP中提供的cURL可以简单、有效地抓取网页的内容。因此，在服务器端我们可以通过cURL库的使用实现跨域请求。 任务四：JSONP跨域请求 通过PHP跨域请求 （2）cURL库 开启cURL库 要想使用cURL库，需在PHP的配置文件中开启;extension=php_curl.dll扩展 加载动态链接库 在Apache的配置文件中载入PHP安装目录中的libssh2.dll动态链接库。 loadFile c:/web/php5.4/libssh2.dll extension=php_curl.dll 任务四：JSONP跨域请求 通过PHP跨域请求 （2）cURL库 创建一个cURL会话 通过curl_setopt()函数为cURL会话设置URL请求参数 利用curl_exec()函数执行cURL会话，同时返回抓取结果 关闭cURL会话即可 引入知识点 任务四：JSONP跨域请求 1、Ajax跨域问题 2、通过PHP跨域请求 3、通过JSONP跨域请求 任务四：JSONP跨域请求 通过JSONP跨域请求 JSONP是JSON with Padding的缩写，它是一种非官方跨域请求数据的交互协议。由于浏览器间的“同源策略”，一般位于当前网站的网页无法与其他网站进行沟通，但是script标签元素的src属性是没有跨域的限制的，因此我们可以使用此种方式实现跨域请求。 任务四：JSONP跨域请求 通过JSONP跨域请求 在当前网站的客户端页面test.html中创建一个回调函数test() 通过script标签的src属性载入测试网站（）中的test.php文件，实现跨域请求 在test.php文件中调用test()函数，将处理后的JSON格式数据作为参数进