AJAX、JSON与JSONP

2019-10-29  本文已影响0人  jxvl假装

jquery之后

json

json是JavaScript Object Notation的首字母的缩写,单词的意思是javascript对象表示法,这里说的json指的是类似于javascript对象的一种数据格式

javascript自定义对象:

var oMan = {
    name:'tom',
    age:15,
    talk:function(){
        ...
    }
}

json格式的数据:

{
    "name":"tom",
    "age":13,
    "info":["male","student"]
}

json就类似python中的字典,属性名或字符串需要用双引号引起来

ajax

异步的javacript

javascript是运行在客户端的,有权限限制,不能对文件进行操作(出于安全考虑)。ajax就越过了这个限制,可以读文件。

ajax技术的目的是让javascript发送http请求,与后台通信,获取数据和信息。他的原理是通过实例化xmlhttp对象,使用此对象与后台通信。

局部刷新和无刷新

ajax可以实现局部刷新,也叫做无刷新,无刷新指的是整个页面不刷新,只局部刷新,ajax可以自己发送http请求,不用通过浏览器的地址栏,所以整的页面不会刷新,ajax获取到后台数据,更新页面显示数据的部分,就做到了页面局部刷新

同源策略

ajax请求的页面或资源只能是同一个域下面的资源,不能是其他域的资源,这是在设计ajax时基于安全的考虑

ajax的用法

常用参数:

以前的写法(写在js的位置即可)

data.json里面的数据:{"name":"tom","age":28}

$.ajax({
    url:'js/data.js',
    type:'GET',
    dataType:'json'
    data:{'aa':1},
    success:function(){
        alert(data.name);
    },
    error:function(){
        alert('服务器超时,请重试')
    }
})

新的写法(推荐):

$ajax.({
    url:'js/data.js',
    type:'GET',
    dataType:'json'
    data:{'aa':1}
})
.done(function(dat){    //成功时的回调函数
    alert(dat.name);
})
.fail(function(){   //失败时的回调函数
    alert("服务器超时,请重试!")
})

jsonp

ajax只能请求同一个域下面的数据或资源,有时候需要跨域请求数据,就需要用到jsonp技术,jsonp可以跨域请求数据,它的原理主要是利用了<script>标签可以跨域链接资源的特性(在script中可以引用任意域下面的资源)。jsonp和ajax的原理完全不一样,不过jquery将他们封装成同一个函数($.ajax({}))。

$.ajax({
    url:'js/data.js',
    type:'get',
    dataType:'jsonp',   //这里是jsonp
    jsonpCallback:'fnback'  //这里是一个函数名,这个名称必须和data.js里面的名称一样
})
.done(function(dat){

    alert(dat.name);
})
//data.js里面的数据:fnBack({"name":"Tome","age":23})
// jsonp的接口,必须写成如上fnBack形式

ps:通过jsonp,我们就可以使用一些公用的接口

上一篇下一篇

猜你喜欢

热点阅读