通过jsonp获取json数据实现AJAX跨域请�

AJAX(异步JavaScript和XML)是一种创建快速动态网页的技术。它与服务器交换数据，并在不重新加载整个页面的情况下更新一些网页。ajax使用XMLHttpRequest对象在后台与服务器交换数据。XMLHttpRequest是AJAX的基础，它允许客户端JavaScript通过HTTP请求连接到远程服务器。

但是由于浏览器的限制，这种方法不能用于跨域访问。如果使用这种方法进行跨域访问，就会出现安全问题。但是我们可以发现，当一个网页跨域调用js文件时，不会受到浏览器的限制，所以我们可以将远程服务器的数据加载到js格式文件中，然后供客户端调用。

JSON(JavaScript对象表示)是一种轻量级的文本数据交换格式，它具有自我描述性，易于理解。JSON可以用JavaScript解析，JSON数据可以用AJAX传输。

JSON实例：

{ ' employees ' :[{ ' first name ' : ' Bill '，' lastName':'Gates' }，{ 'firstName':'George '，' lastName':'Bush' }，{'first name' :' Thomas '，' last name' :' Carter'}]} JSON语法是JavaScript对象符号语法：的子集

数据在名称/值对中，用逗号分隔，对象用大括号，数组用方括号。

JSON的特点

纯文本，易于传输Javascript原生支持跨平台，几乎所有后台语言都支持使用轻量级的文本数据交换格式，适合在互联网上传输比XML更小、更快、更容易解析。基于JSON的这些特性，服务器可以动态生成JSON文件，然后将客户端需要的数据加载到这个文件中，然后将这个文件回调给客户端，供客户端使用。为了方便客户端使用数据，逐渐形成了非正式的传输协议JSONP。该协议的一个关键点是允许用户向服务器传递一个回调参数，然后当服务器返回数据时，回调参数将作为函数名加载JSON数据，这样客户端就可以自定义自己的函数来自动处理返回的数据。

如何使用JSONP

一个简单的方法是使用jQuery来实现：

！DOCTYPE html html head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 ' title test/title script type=' text/JavaScript ' src=' http :http://apps . bdimg.com/libs/jquery/2 . 1 . 1/jquery . js '/script script type=' text/JavaScript ' $(文档)。ready(function(){ $)。ajax({ type: 'get '，async: false，URL : ' http://encounter . Christmas 023 . space/JSON . PHP？Name=mavisage=18 '，datatype :' jsonp '，jsonp:' callback '，//参数名传递给请求处理程序或页面获取jsonp回调函数名(一般默认为： callback)，jsonp回调3360' message '，//用户自定义jsonp回调函数名，jQuery会自动为你处理数据成功：函数(JSON) {alert('你的名字：' JSON . name ' age:' JSON . age)；}，error : function(){ alert(' fail ')；} });});/script/headbody/body/htmltype:请求类型，GET或POST，默认为GET；Async:为真(异步)或假(同步)。默认情况下，这是真的。同步请求将锁定浏览器，用户的其他操作必须等待请求完成后才能执行。Url:发送请求的地址(跨域请求时的绝对地址)；DataType:指定服务器返回的数据类型；JsonpCallback:自定义jsonp回调函数名；成功：请求成功后的回调函数；错误：当请求失败时调用此方法。运行结果：

服务器返回的数据类型：

返回一个名为message的回调函数，函数中封装的数据为JSON格式。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。