当前位置:首页>开发>正文

求jQuery原理 jquery ajax 怎样跨域获取 json 数据

2023-04-27 22:38:03 互联网 未知 开发

 求jQuery原理 jquery ajax 怎样跨域获取 json 数据

求jQuery原理

Jquery就是javascript
jquery所有的功能都是用javascript实现的
他只是把javascript封装起来,我们用的时候用很简单的代码就可以实现很复杂的功能,而这一切都由网页中引用的那个jquery文件来帮我们实现,那个文件就是用javascript写的。如果你自己用javascript来写代码是很复杂的。
不知道你明白没

jquery ajax 怎样跨域获取 json 数据

jsonp是英文json with padding的缩写。它允许在服务器端生成script tags至返回至客户端,也就是动态生成javascript标签,通过javascript callback的形式实现数据读取。
html页面端示例代码:

复制代码代码如下:

 //首先要引入jquery的js包 
 jQuery(document).ready(function(){ 
    $.ajax({

    type : "get", //jquey是不支持post方式跨域的
    async:false,
    url : "http://api.taobao.com/apitools/ajax_props.do", //跨域请求的URL
    dataType : "jsonp",
    //传递给请求处理程序,用以获得jsonp回调函数名的参数名(默认为:callback)
    jsonp: "jsoncallback",
    //自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名
    jsonpCallback:"success_jsonpCallback",
    //成功获取跨域服务器上的json数据后,会动态执行这个callback函数
    success : function(json){ 
    alert(json) 
    } 
    }) 
 }) 

服务器端示例代码,以java为例:

服务器端代码,是重点,开始以为,只要客户端通过jsonp就可以直接跨域访问,其实不然,需要服务器端的支持才行。

复制代码代码如下:

 public void jsonpTest() throws IOException{

    HttpServletRequest request = ServletActionContext.getRequest()
    HttpServletResponse response = ServletActionContext.getResponse()
    //根据html指定的jsonp回调函数的参数名,获取回调函数的名称
    //callbackName的值其实就是:success_jsonpCallback
    String callbackName = (String)request.getAttribute("jsoncallback")
    //简单模拟一个json字符串,实际可使用google的gson进行转换,次数通过字符串拼接
    //{"name":"张三","age":28}
    //是对"号进行转义
    String jsonStr = "{"name":"张三","age":28}"
    //最终返回的数据为:success_jsonpCallback({"name":"张三","age":28})
    String renderStr = callbackName "(" jsonStr ")"
    response.setContentType("text/plaincharset=UTF-8")
    response.getWriter().write(renderStr) 
 }

最新文章