ajax、json和jsonp的区别

╰半橙微兮° 2022-04-25 09:32 200阅读 0赞

一、ajax、json和jsonp的比较

1.  **ajax的两个问题**  
    1）ajax以何种格式来交换数据  
    2）跨域的需求如何解决  
    数据跨域用自定义字符串或者用XML来描述  
    跨域可以用服务器代理来解决
2.  **ajax的理解**  
    1）ajax是一种发送http请求与后台进行异步通讯的技术，与后台通信，获取数据和信息，其原理是实例化xmlhttp对象，使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行，从而实现异步  
    2）一个完整的AJAX请求的步骤：  
    实例化XMLHttpRequest对象  
    连接服务器  
    发送请求  
    接收响应数据  
    3）ajax的解决：  
    json是一种数据交换格式 “暗号”，描述信息格式  
    jsonp是非官方跨域数据交互协议“接头方式”信息传递双方约定的方法，可以用来跨域  
    4）ajax的局部刷新  
    ajax 可以实现局部刷新，也叫做无刷新，无刷新指的是整个页面不刷新，只是局部刷新  
    ajax可以自己发送http请求，不用通过浏览器的地址栏，所以页面整体不会刷新  
    ajax获取到后台数据，更新页面显示数据的部分，就做到了页面局部刷新  
    5）数据接口  
    数据接口是后台程序提供的，它是一个 url 地址，访问这个地址，会对数据进行增、删、改、查的操作，最终会返回 json 格式的数据或者操作信息，格式也可以是text、xml等  
    6）同源策略  
    ajax 请求的页面或资源只能是同一个域下面的资源，不能是其他域的资源，这是在设计 ajax 时基于安全的考虑  
    7）ajax的写法：  
    使用方法:

$.ajax({ 
        url:'请求地址',
        type: '请求方式: 默认是'GET'，常用的还有'POST' ',
        dataType: '设置返回的数据格式，常用的是'json'格式，也可以设置为'html' ',
        data: '设置发送给服务器的数据',
        success: '设置请求成功后的回调函数',
        error: '设置请求失败后的回调函数',
        async: '设置是否异步，默认值是'true'，表示异步'
    })

参数说明：  
url 请求地址  
type 请求方式，默认是’GET’，常用的还有’POST’  
dataType 设置返回的数据格式，常用的是’json’格式，也可以设置为’html’  
data 设置发送给服务器的数据  
success 设置请求成功后的回调函数  
error 设置请求失败后的回调函数  
async 设置是否异步，默认值是’true’，表示异步  
8）`$.ajax`按照请求方式可以简写成`$.get`或者`$.post`方式

$.get("/change_data", { 'code':300268},
      function(dat){ 
        alert(dat.name);
    });
    
    $.post("/change_data", { 'code':300268},
      function(dat){ 
        alert(dat.name);
    });

1.  **json的理解**  
    1）json是JavaScript 对象表示法 (JavaScript Object Notation)，基于文本的数据交换方式或者数据描述格式，一种通用的字符串数据格式，一种轻量级的数据交换格式，比 XML 更小、更快、更易解析  
    2）json的优点  
    基于纯文本，跨平台传递极其简单；  
    javascript原生支持，后台语言几乎全部支持  
    轻量级数据格式，占用字符数量极小，特别适合互联网传递  
    可读性比较强，不必xml那么一目了然但在合理的依次缩进之后还是很容易识别的  
    容易编写和解析，当然前提是知道数据结构  
    3）json以非常简单的方式来描述数据结构 xml能做的它都能做  
    4）json的格式或者规则  
    json的数据两种数据类型 大括号\{\}和方括号\[\] 其余英文冒号,是分隔符 冒号:是映射符 英文双引号"“是定义符  
    \{\}是描述一组 不同类型的无序键值对集合 每个键值对理解为OOP的属性描述  
    \[\]是描述一组 相同类型的有序数据的集合 对应OPP的数组  
    \{\}不同类型无序键值对和\[\]相同类型有序集合中有有多个子项，通过英文逗号分隔  
    键值对以英文冒号:分隔并且建议键名都加英文双引号”"，以便不同语言的解析  
    json内部常用数据类型是字符串(必须用双引号引起来其他不用) 数字 布尔 日期 null ，日期比较特殊
2.  **jsonp的理解**  
    1）jsonp的产生原因  
    ajax直接请求普通文件存在跨域无权限访问的问题（静态页、动态页、web服务、wcf只要是跨域请求一律不准）  
    web的页面上调用js文件是不受跨域的影响（凡拥有src属性的标签都拥有跨域能力script img iframe）  
    可以判断 现在想通过纯web端(ActiveX控件、服务端代理、H5之Websocket等方式不算)跨域访问数据就只有一种可能，就是在远程服务器上设法把数据装进js格式的文件里，供客户度调用和进一步处理  
    json的纯字符数格式可以简洁的描述复杂数据还被js原生支持  
    web客户端通过与调用脚本一样的方式来调用跨域服务器上动态生成的js格式文件(后缀.json)，服务器之所以要动态生成json文件目的把客户端需要的数据装入进去  
    客户端在对json文件调用成功后获得自己所需的数据剩下的就按照自己需求进行处理和展现，这种获取远程数据的方式非常像ajax其实并一样  
    为了方便客户端使用数据逐渐形成非正式传输协议jsonp  
    该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住json数据 这样客户端就可以随意定制自己的函数来自动处理返回数据  
    2）jsonp是一种可以实现跨域发送http请求的数据通信格式，可以嵌在ajax中使用，其原理是利用script标签可以跨域链接资源的特性。  
    3）JSONP由两部分组成：回调函数和数据，回调函数一般是在浏览器控制，作为参数发往服务器端（当然，你也可以固定回调函数的名字，但客户端和服务器端的名称一定要一致）。当服务器响应时，服务器端就会把该函数和数据拼成字符串返回  
    4）JSONP的请求过程：  
    请求阶段：浏览器创建一个 script 标签，并给其src 赋值  
    发送请求：当给script的src赋值时，浏览器就会发起一个请求  
    数据响应：服务端将要返回的数据作为参数和函数名称拼接在一起(格式类似”jsonpCallback(\{name: ‘abc’\})”)返回。当浏览器接收到了响应数据，由于发起请求的是 script，所以相当于直接调用 jsonpCallback 方法，并且传入了一个参数  
    5）JSONP的原理：  
    在客户端动态的创建一个 script 标签，代替 XHR 对象，指定 script.src 向服务器发起请求，请求的PHP页面除了返回需要的数据外，还需要填充一个指定的函数名  
    6）jsonp只支持get请求，ajax支持get和post请求  
    7）ajax 只能请求同一个域下的数据或资源，有时候需要跨域请求数据，就需要用到 jsonp 技术，jsonp 可以跨域请求数据，它的原理主要是利用了

5.**ajax和jsonp的实质核心、区别联系**  
1）ajax和jsonp的调用方式很像，目的一样，都是请求url，然后把服务器返回的数据进行处理，因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装  
2）实质不同  
ajax的核心是通过xmlHttpRequest获取非本页内容  
jsonp的核心是动态添加script标签调用服务器提供的js脚本  
3）区别联系  
不在于是否跨域  
　ajax通过服务端代理一样跨域  
　jsonp也不并不排斥同域的数据的获取  
4）jsonp是一种方式或者说非强制性的协议，ajax也不一定非要用json格式来传递数据  
5）ajax 数据接口和 jsonp 数据接口的区别  
开发返回数据的接口，如果是一般的 ajax 接口，让接口直接返回 json 格式的数据字符串就可以了，这种接口的数据是不能跨域请求的，如果要跨域请求数据，需要开发jsonp的接口，开发jsonp的接口，需要获取请求地址中的参数，也就是’callback’键对应的值，然后将这个值和json数据拼装成一个函数调用的形式的字符串返回，就完成了一个jsonp的接口，这个键值对是由$.ajax函数自动产生的  
一般接口返回的数据形式：  
`‘{“iNum”:12,’sTr’:’abc’}’;`  
jsonp返回的数据形式：  
`‘jQuery1124018787969015631711_1522330257607({“iNum”:12,”sTr”:”abc”})’;`