Jquery ajax

课程目的

  • 掌握ajax函数的使用
  • 熟悉jsonp
  • 熟悉跨域原理

课程内容

ajax函数

ajax() 方法通过 HTTP 请求加载远程数据。

$.ajax(opts);

opts为ajax所需的参数,为json格式

常用参数有:

url: 后端接口地址

type: 数据传输方式,GET或者POST

dataType: 预期服务器返回的数据类型。常用为json、jsonp

data: 发给服后端的数据

cache: 是否开启缓存,默认为true开启

success: 成功后的回调函数,返还的数据做为参数

error: 接口失败的回调函数

complete: 请求完成的回调函数

如:

    var opts = {
        url: 'getMoreItem.php',
        type: 'GET',
        dataType: 'json',
        data: {
            name: 'xiaoming'
        },
        success: function(data){
            console.log(data.items);
        },
        error: function(){
            alert('error');
        }
    };
    $.ajax(opts);

实际的例子

例1:点击加载更多效果--get方式

后端代码

例2:点击加载更多效果--post方式

后端代码

例3:点击加载更多效果--jsonp方式

后端代码

AJAX jsonp

防止重复提交

当用户提交请求时,后台处理请求是需要时间的。如果在后台给出响应之前用户多次点击提交,后端就会多次收到请求,返还多次内容。

如何在后端响应的数据到达之前避免用户重复提交呢?

对于表单,可在用户初次提交后把按钮设置为disabled,当数据响应后再去掉disabled属性。

对于ajax请求,可设置标记变量flag,初始时设置flag为true.在用户点击提交按钮后,判断flag是否为true,如果是则发送ajax请求,并把flag设置为false。 等服务端给出响应后再把flag设置为true;

    var ready = true;
    $('.add-more').on('click', function(){
        ...
        if(!ready){
            return;
        }
        ready = false;
        $.ajax({
            ...
            complete: function(){
                ready = true;
            }
        });
    });

跨域

浏览器出于安全方面的考虑,只允许与本域下的接口交互。

本域指的是?

  • 同协议:如都是http或者https
  • 同域名:如都是http://jirengu.com/a 和http://jirengu.com/b
  • 同端口:如都是80端口

如:

  • http://jirengu.com/a/b.js 和 http://jirengu.com/index.php (ok)

跨域的例子:

  • http://jirengu.com/main.js 和 https://jirengu.com/a.php (协议不同)
  • http://jirengu.com/main.js 和 http://bbs.jirengu.com/a.php (域名不同,域名必须完全相同才可以)
  • http://jiengu.com/main.js 和 http://jirengu.com:8080/a.php (端口不同,第一个是80)

解决跨域的方法:

  • 图像ping

html中img标签可以访问其他域名下的图片,可在页面上创建img标签,地址连到后端服务器

<img id="pbstatImg" style="display:none" src="http://mpa.baidu.com/mobile/img/t.gif?name=xiaoming&age=20">

一般用于点击统计

  • script标签引入
  • 服务器中转
  • iframe

什么是jsonp

html中script标签可以引入其他域下的js,比如引入线上的jquery库。利用这个特性,可实现跨域访问接口。需要后端支持

echo $cb . '&&' . $cb . '(' . json_encode($ret) . ')';
  1. 定义数据处理函数_fun
  2. 创建script标签,src的地址执行后端接口,最后加个参数callback=_fun
  3. 服务端在收到请求后,解析参数,计算返还数据,输出 fun(data) 字符串。
  4. fun(data)会放到script标签做为js执行。此时会调用fun函数,将data做为参数。

js跨域

jquery jsonp

jquey ajax的dataType如果为jsonp,则内部执行上面的操作。

 $.ajax({
        url: 'http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/29-jquery%20ajax/code/getMoreItemJsonp.php',
        type: 'GET',
        dataType: 'jsonp',
        data: {}
}