ajax初步了解
2017-08-05 11:57
267 查看
一、什么是ajax
ajax可以在不加载整个网页情况下,部分更新网页内容,可以定义为javascript与xml的结合体,目前有两种实现方式,一是用原生ajax语法,二是,使用jquery封装的ajax;不管怎样都是基于javascript来实现的
二、ajax使用
1.原生ajax
XmlHttpRequest:与服务器进行交互实现网页的部分刷新,几乎目前所有浏览器都支持,IE5和IE6使用的还是ActiveXObject()
创建了XmlHttpRequest对象xmlHttp后,使用open和send方法发起网络请求
xmlHttp.open(“GET”,”URL”,”async”):三个参数分别是请求方式,地址以及是否异步
xmlHttp.send():分为有参和无参,有参代表Post请求中的请求体,一般有参只用于post请求
xmlHttp响应:
xmlHttp.responseText():代表返回内容为文本
xmlHttp.responseXml():代表返回内容为xml
xmlHttp的响应任务:
xmlHttp.onreadystatechange:当请求状态发生改变时,会触发
xmlHttp.readyState有五种状态:分别是 0=请求未初始化;1=服务器连接已建立;2=请求已经接收;3=请求处理中;4=请求已完成
xmlHttp.status:请求响应状态码 200=成功
下面来一个小栗子:
ajax代码
jsp布局
Servlet内容
2.基于jquery的ajax
常见四种方式:
$.ajax:jquery对ajax最近基本的封装,可以完成异步通讯的所有功能,方法列表:
method:请求方式
url:请求地址
async:是否异步
data:需要提交的数据
dataType:服务器返回数据类型,对应MIME类型
success:成功的回调
error:失败的回调
.get:jquery封装的get请求与.post方式相同
method:请求方式
data : 待发送数据
callBack : 成功后的回调
type :返回内容类型
$.getJSON:jquery封装的请求json的请求
url :请求地址
data:请求参数
callBack:请求成功后的回调
最常用的是$.ajax,可以完成我们所需要的所有异步请求
用$.ajax继续完成上述实例,只需要我们把ajax代码换成如下即可
三、小结
通过以上的总结,对ajax有了自己的认识,内容不多,但是功能挺强大的
ajax可以在不加载整个网页情况下,部分更新网页内容,可以定义为javascript与xml的结合体,目前有两种实现方式,一是用原生ajax语法,二是,使用jquery封装的ajax;不管怎样都是基于javascript来实现的
二、ajax使用
1.原生ajax
XmlHttpRequest:与服务器进行交互实现网页的部分刷新,几乎目前所有浏览器都支持,IE5和IE6使用的还是ActiveXObject()
创建了XmlHttpRequest对象xmlHttp后,使用open和send方法发起网络请求
xmlHttp.open(“GET”,”URL”,”async”):三个参数分别是请求方式,地址以及是否异步
xmlHttp.send():分为有参和无参,有参代表Post请求中的请求体,一般有参只用于post请求
xmlHttp响应:
xmlHttp.responseText():代表返回内容为文本
xmlHttp.responseXml():代表返回内容为xml
xmlHttp的响应任务:
xmlHttp.onreadystatechange:当请求状态发生改变时,会触发
xmlHttp.readyState有五种状态:分别是 0=请求未初始化;1=服务器连接已建立;2=请求已经接收;3=请求处理中;4=请求已完成
xmlHttp.status:请求响应状态码 200=成功
下面来一个小栗子:
ajax代码
<script type="text/javascript"> var xmlHttp=null; function loadContext(url,fuc) { if(window.XMLHttpRequest){ xmlHttp = new XMLHttpRequest(); }else{ xmlHttp = new ActiveXObject(); } xmlHttp.onreadystatechange=fuc; xmlHttp.open("GET",url,true); xmlHttp.send(); } function myFunction(){ loadContext("/ajax",function () { if(xmlHttp.readyState==4 && xmlHttp.status==200){ document.getElementById("myDiv").innerHTML = xmlHttp.responseText; } }); } </script>
jsp布局
<div id="myDiv"><h2>Let AJAX change this text</h2></div> <button type="button" onclick="myFunction()">通过AJAX更新页面</button>
Servlet内容
response.setContentType("text/plain"); response.getWriter().write("BeiJing welcome you");
2.基于jquery的ajax
常见四种方式:
$.ajax;$.get ;$.post;$.getJSON
$.ajax:jquery对ajax最近基本的封装,可以完成异步通讯的所有功能,方法列表:
method:请求方式
url:请求地址
async:是否异步
data:需要提交的数据
dataType:服务器返回数据类型,对应MIME类型
success:成功的回调
error:失败的回调
.get:jquery封装的get请求与.post方式相同
method:请求方式
data : 待发送数据
callBack : 成功后的回调
type :返回内容类型
$.getJSON:jquery封装的请求json的请求
url :请求地址
data:请求参数
callBack:请求成功后的回调
最常用的是$.ajax,可以完成我们所需要的所有异步请求
用$.ajax继续完成上述实例,只需要我们把ajax代码换成如下即可
function myFunction(){ $.ajax({ type:"GET", url:"/ajax", dataType:"text", success:function(result){ document.getElementById("myDiv").innerHTML = result; } }) }
三、小结
通过以上的总结,对ajax有了自己的认识,内容不多,但是功能挺强大的
相关文章推荐
- 对ajax的初步了解
- Ajax学习---1(初步了解)
- 初步了解 ASP.NET AJAX 扩展
- ajax初步了解
- 初步了解JavaScript,Ajax,jQuery,并比较三者关系
- 初步了解 Ajax
- Ajax初步了解
- 初步了解 ASP.NET AJAX 扩展
- JavaScript、jQuery和Ajax初步了解
- ajax传值后台获取初步了解
- 初步了解 InstallShield for Visual C++6.0 (二)
- 经典算法研究系列:六、教你初步了解KMP算法、updated
- Ajax使用初步 (.net)
- 初步了解MVVM模式
- 初步了解K sum问题
- SPRING 了解初步
- AJAX初步学习
- AJAX初步学习
- 对ajax的了解
- 初步了解UBOOT (4)