JavaEE-交互式核心技术Ajax开发步骤
概述
AJAX = Asynchronous JavaScript and XML
Asynchronous :异步的
Ajax 是一种用于创建快速动态网页的技术,在无需重新加载整个网页的情况下,能够更新部分网页
通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新
传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面
AJAX开发步骤
AJAX的Get请求
所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)
下面举例Ajax的get请求方式
1.创建XMLHttpRequest对象
<script>
//创建XMLHttpRequest对象
function ajaxFun() {
xmlHttp = new XMLHttpRequest()
}
</script>
2…使用open方法建立与服务器的连接
function valid(obj) {
ajaxFun();
var url =""
xmlHttp.open('get', url, true)
}
打开连接,第一个参数是请求方式,第二个参数是请求地址,第三个参数是同步还是异步,true异步,false是同步
3.接受服务器的响应(响应你的连接请求)
<script>
//创建XMLHttpRequest对象
function ajaxFun() {
xmlHttp = new XMLHttpRequest()
}
function valid(obj) {
ajaxFun();
var url =""
xmlHttp.open('get', url, true)
xmlHttp.onreadystatechange=function () {
//请求服务器完成
if (xmlHttp.readyState==4){
//连接正常
if (xmlHttp.readyState==200) {
var result = xmlHttp.responseText
alert(result)
}
}
}
}
</script>
4.向服务器端发送数据
<script>
//创建XMLHttpRequest对象
function ajaxFun() {
xmlHttp = new XMLHttpRequest()
}
function valid(obj) {
ajaxFun();
var url =""
xmlHttp.open('get', url, true)
xmlHttp.setRequestHeader("content-type","text/html;charset=UTF-8")
xmlHttp.onreadystatechange=function () {
//请求服务器完成
if (xmlHttp.readyState==4){
//连接正常
if (xmlHttp.readyState==200) {
var result = xmlHttp.responseText
alert(result)
}
}
}
xmlHttp.send(null);
}
</script>
如果是get请求数据是在url上传递,不需要发送数据
注意
send必须放最后!
AJAX的Post请求
与get差不多
AJAX同步与异步
大家考虑一下上面的代码,为什么回调函数在发送函数的上方,这就是异步的作用!不管你连接是否成功,我都将数据发送出去!
大家可以将异步理解成多线程