【js】用DOM方式实现jQuery.ajax
2016-03-21 17:37
489 查看
因为jQuery.ajax()老是碰到各种各样的错,于是决定用最原始的DOM方式实现ajax获取jsonp的方法,过程中也加深了对其的理解!
总的来说就是动态创建DOM的script节点并添加到head中,url为请求jsonp的地址,需要带callback方法名,这样就可以回调本地的方法,传入参数了。
详解:
var url = "http://localhost:5000/route?callback=callback_function_name&...."
// add script to DOM
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
document.head.appendChild(script);
这样我们就向html动态添加了<script src="..." type="..."></script>节点,url参数需要设置回调函数的方法名,具体设置要参照服务提供方的doc(大概就是获取url参数中key=callback的值作为方法名,用来包装服务方要返回的json数据,然后一起传回)。
PS: jquery中设置可见:【error】jQuery.ajax()报错Uncaught
SyntaxError: Unexpected token
于是script的内容就呈现为 callback_function_name({json}),因为加载了该脚本,所以会调用本地的名字为callback_function_name的方法,而传回的数据json就作为callback_function_name的参数传入方法进行处理。
var callback_function_name(json_data){......}
参考链接:http://www.jb51.net/article/57728.htm
总的来说就是动态创建DOM的script节点并添加到head中,url为请求jsonp的地址,需要带callback方法名,这样就可以回调本地的方法,传入参数了。
详解:
var url = "http://localhost:5000/route?callback=callback_function_name&...."
// add script to DOM
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
document.head.appendChild(script);
这样我们就向html动态添加了<script src="..." type="..."></script>节点,url参数需要设置回调函数的方法名,具体设置要参照服务提供方的doc(大概就是获取url参数中key=callback的值作为方法名,用来包装服务方要返回的json数据,然后一起传回)。
PS: jquery中设置可见:【error】jQuery.ajax()报错Uncaught
SyntaxError: Unexpected token
于是script的内容就呈现为 callback_function_name({json}),因为加载了该脚本,所以会调用本地的名字为callback_function_name的方法,而传回的数据json就作为callback_function_name的参数传入方法进行处理。
var callback_function_name(json_data){......}
参考链接:http://www.jb51.net/article/57728.htm
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- java-用HttpURLConnection发送Http请求.
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 最后一次说说闭包
- Ajax
- $.ajax()方法详解
- jQuery ajax - ajax() 方法
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法