ajax知识总结系列一
来源:互联网 发布:淘宝1元包邮都有什么 编辑:程序博客网 时间:2024/05/20 16:42
什么是ajax?
Ajax并不算是一种新的技术,全称是asychronous javascript and xml,可以说是已有技术的组合,主要用来实现客户端与服务器端的异步通信效果,实现页面的局部刷新,早期的浏览器并不能原生支持ajax,可以使用隐藏帧(iframe)方式变相实现异步效果,后来的浏览器提供了对ajax的原生支持
使用ajax原生方式发送请求主要通过XMLHttpRequest(标准浏览器)、ActiveXObject(IE浏览器)对象实现异步通信效果
ajax异步请求数据简单流程
刷新和无刷新(局部刷新)
- ajax可以实现局部刷新,也叫做无刷新,无刷新指的是整个页面不刷新,只是局部刷新,ajax可以自己发送http请求,不用通过浏览器的地址栏,所以页面整体不会刷新,ajax获取到后台数据,更新页面显示数据的部分,就做到了页面局部刷新。
同源策略
ajax请求的页面或资源只能是同一个域下面的资源,不能是其他域的资源,这是在设计ajax时基于安全的考虑
报错如下图:
跨域问题
跨域的概念:协议、域名、端口都相同才同域,否则都是跨域。
如下图所示案例:
解决跨域的三种方法:
第一种:jsonp,推荐
- 实现原理:
可以动态创建script标签,使用标签的src属性访问js文件的形式获取js脚本,并且这个js脚本中的内容是函数调用,该函数调用的参数是服务器返回的数据,为了获取这里的参数数据,需要事先在页面中定义回调函数,在回调函数中处理服务器返回的数据,这就是解决跨域问题的主流解决方案
+++ 动态创建script方案:(知道就好)
var script = document.createElement(‘script’);
script.src = ‘./jsonp.php?cb=callback’;
document.body.appendChild(script);
++++++ 采用script标签方案,推荐
- 1,script标签的src方式加载js文件
<script type="text/javascript" src="./xiaoke.js"></script>
- 2,加载js文件内进行函数调用
# xiaoke.js文件中:hello({username:xiaoke,password:123456});
- 3,数据以函数参数的形式传递
- 4,回调函数中获取参数数据
function hello(data){ console.log(data.username); }
第二种:iframe,过时了
第三种:服务器解决,一般公司是不允许的。
Access-Control-Allow-Origin
jQuery中jsonp的方法:
$.ajax({ url:'data.js', type:'get', dataType:'jsonp', jsonpCallback:'callBack'}).done(function(data){ alert(data.name);}).fail(function() { alert('服务器超时,请重试!');});// data.js里面的数据: callBack({"name":"xiaoke","age":26});
阅读全文
0 0
- ajax知识总结系列一
- ajax知识总结系列之二
- ajax知识总结系列之三
- 注解系列知识总结(一)
- 注解系列知识总结(一)
- AJAX知识总结
- Ajax核心知识总结
- Ajax知识总结
- Ajax小知识总结
- ajax完整知识总结
- ajax知识总结
- AJAX知识总结
- AJAX知识总结
- AJAX知识总结
- 知识总结系列1
- 知识总结系列2
- ASP.NET AJAX深入浅出系列课程(学习总结一)
- AJAX系列(一)
- java实现计算长方形周长
- shell 函数使用方法
- 栈的压入弹出序列
- TensorFlow学习笔记--安装配置-windows
- c语言运算符优先顺序一览表
- ajax知识总结系列一
- HBase完全分布式集群安装
- leetcode Generate Parentheses(Java)
- (4)JDBC的Statement对象使用
- Maven pom.xml配置常用的变量
- 文件索引结构
- 我的学习之路_第十七章_JavaUtils
- 树莓派智能监控小车(QT+树莓派)------整体思路
- 【工作笔记】笨办法搞定jasper动态列