Ajax介绍
- 产生
Ajax被认为是(Asynchronous JavaScript and XML的缩写)。现在,允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax.
“Ajax”这个名字是在2005年2月,Adaptive Path的Jesse James Garrett在他的文章Ajax:A New Approach to Web Application中创造。
而Ajax这项技术,是Google在Google Labs发布Google Maps和Google Suggest后真正为人所认识。
概念
AJAX 即 “ Asynchronous Javascript And XML” (异步 JavaScript 和 XML ),是指一种创建交互式网页应用的网页开发技术。
通过在后台与服务器进行少量数据交换, AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX )如果需要更新内容,必须重载整个网页页面
jQuery 对 Ajax 操作进行了封装, 在 jQuery 中
最底层的方法时 $.ajax(),
第二层是 load(), $.get() 和 $.post(),
第三层是 $.getScript() 和 $.getJSON()
常用三种方式
$.get(url,date,function(data){},dataType)
注意事项:中文会乱码 并且数据不能超过2kb
$.post(url,date,function(data){},dataType)
注意事项:跟get比对,支持中文,并且大数据量数据
$.ajax({url, type , data , dataType, success , error})
完美最常用
<script type="text/javascript">
$.post('ajax_2.jsp',function(data){$("#car").html(data)},'text')
$.get('ajax_3.jsp',function(data){$("#book").html(data)},'text')
$.ajax({
url:'ajax_4.jsp',//路径
type:'post', //方式 post 和get
// data:{} ,参数 以键值对形式
dataType:'text',//返回的数据格式 text json
async:true, //异步 默认false ,
success:function(data){ //成功回调函数
$("#hero").html(data)
},
error:function(){//错误回调函数
alert("失败")
}
})
</script>
|
表单序列化
jQuery 为准备 “发送到服务器的 key/value 数据” 提供了一个简化的方法: serialize(). 该方法作用于一个 jQuery 对象, 能将 DOM 元素内容序列化为字符串, 用于 Ajax 请求.
使用 serialize() 方法可以自动完成对参数的 url 编码
因为该方法作用于 jQuery 对象, 所以不光只要表单能使用, 其它选择器选取的元素也能使用它.
$('form').submit(function() {
alert($(this).serialize());
return false;
});
结果:a=1&b=2&c=3&d=4&e=5
- 概念
XHR英文全名XmlHttpRequest,中文可以解释为可扩展超文本传输请求。Xml可扩展标记语言,Http超文本传输协议,Request请求。XMLHttpRequest对象可以在不向服务器提交整个页面的情况下,实现局部更新网页。当页面全部加载完毕后,客户端通过该对象向服务器请求数据,服务器端接受数据并处理后,向客户端反馈数据。 XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问,包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步返回 Web 服务器的响应,并且能以文本或者一个 DOM 文档形式返回内容。尽管名为 XMLHttpRequest,它并不限于和 XML 文档一起使用:它可以接收任何形式的文本文档。XMLHttpRequest 对象是名为 AJAX 的 Web 应用程序架构的一项关键功能。
实例
<script type="text/javascript">
// 2 创建xhr
var request=new XMLHttpRequest();
// 3 准备 调用open
var method="GET";
var url=“你请求的地址”;
request.open(method,url);
// 4 发送请求
request.send(null);
// 5 等待接受 onreadystatechange
request.onreadystatechange=function(){
// 6判断readyState 4 为完成
if(request.readyState==4){
// 7判断status 200 ok 304 没有被修改
if(request.status==200 || request.status==304){
// 8打印内容 responseText
alert(request.responseText)
}
}
}
}
</script>
</head>
<body>
明瑞教育,世界第一
<a href="helloAjax.txt">test</a>
</body>
|