本帖最后由 webker 于 2015-12-8 18:42 编辑
Ajax四步走:
创建XMLHttpRequest对象
①var xml=new XMLHttpRequest();
这里不讨论IE以前那些过时版本...
需要的话可以自己百度
②打开连接
xml.open("get","Province",true);
参数一:请求方式、参数二:请求地址，参数三，是否异步。
③发送请求
xml.send(null);get
get方式时，注意一定为null，否则某些浏览器会发送不成功。
post时需设置请求头
xml.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xml.send("username=webker");post
④处理返回数据
注意XMLHttpRequest的onreadystatechange事件，每当 readyState 改变时，就会触发 onreadystatechange 事件，并都会调用函数体。
readyState属性
XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪 我们只关心此状态。
status属性
200 ok
404 未找到页面
eg:
[JavaScript] 纯文本查看 复制代码 xml.onreadystatechange=function(){
if(xml.readyState==4 && xml.status==200){
var text=xml.responseText;
alert(text);
}
};
ok，接下来通过一个简单的时例子。
异步请求服务器根目录下的Test.txt,并将内容现在在文本域中。
以下是代码:
[HTML] 纯文本查看 复制代码 <html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<input type="button" value="Load" onclick="load()"/>
<textarea rows="10" cols="10" id="con"></textarea>
</body>
<script type="text/javascript">
function load(){
var xml=new XMLHttpRequest();
xml.open("get","Test.txt",true);
xml.send(null);
xml.onreadystatechange=function(){
if(xml.readyState==4 && xml.status==200){
var con=xml.responseText;
document.getElementById("con").value=con;
}
};
}
</script>
</html>
By:webker | 
发表于 2015-12-8 17:39:22
