ajax请求的多种方式-基础篇

2017-12-21  本文已影响0人  中建云筑股份有限公司

     一,什么是ajax?                                                                                       

AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术。

它使用:使用XHTML+CSS来标准化呈现;

使用XML和XSLT进行数据交换及相关操作;

使用XMLHttpRequest对象与Web服务器进行异步数据通信;

使用Javascript操作Document Object Model进行动态显示及交互;

二,ajax请求方式

1.源生js请求

2.Jquery请求

首先导入jquery库(没有的话可以去网上找)

3.跨域请求

为什么要跨域请求,因为浏览器的 同源策略(不在同一域名|| 端口|| ip下无法请求到资源)

方法一,那就要用到jsonp!

jsonp是什么? 怎么用?

jsonp: 就是用来解决跨域访问资源的问题,浏览器同源策略的问题。

jsonp怎么用: 是使用了标签(script)不会触发浏览器的同源策略的原理。

步骤:

1. 在html中增加script标签

2. 将要请求的资源放到script标签的src属性中

<script src="https://api.douban.com/v2/book/1220562?callback=getData"></script>

function(obj){

console.log(obj);

}

方法二,

反向代理解决跨域访问数据

这就要用到nginx服务器(上面方法可以用http-server静态资源服务器);为什么要用nginx,?因为nginx服务器不仅可以做静态资源服务器,有可以做代理服务器!(nginx下载地址:http://nginx.org/en/download.html)

这是要跨域访问的api接口(http://www.wookmark.com/api/json/popular)

找到下载好的文件。然后对这个文件nginx/conf/nginx.conf配置;添加下面的代码(要访问的数据资源api接口)

启动服务器:nginx  文件夹内按住shift键单击鼠标右键进入cmd

                      nginx 回车即可

停止所有nginx进程 cmd输入 : taskkill   /f  /im  nginx.exe

注:1.nainx文件夹存放路径不能有中文,否则启动不了。

        2.每次修改文件都要重启服务器,最好把上次服务器停掉。

        3.你所要打开的html,要放在nginx文件内的html文件夹下,nginx.conf文件内默认打开index.html,可以自行             设置。

        4:ajax请都要使用到服务器,所以打开你的文件之前都要先请求服务求。

              服务器种类有很多:nginx ,hs,apache等等

最后:还有其他请求方式,方法大同小异。上面写的很乱看不懂可以私聊(小白一个,吊大的请飘过)

上一篇下一篇

猜你喜欢

热点阅读