webker 发表于 2015-12-8 17:39:22

Ajax省市联动(上)

本帖最后由 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:
xml.onreadystatechange=function(){
                if(xml.readyState==4 && xml.status==200){
                        var text=xml.responseText;
                        alert(text);
                }
        };

ok,接下来通过一个简单的时例子。
异步请求服务器根目录下的Test.txt,并将内容现在在文本域中。

以下是代码:
<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

asion 发表于 2015-12-9 01:09:33

支持中国红客联盟(ihonker.org)

Sty,涛 发表于 2015-12-9 18:47:07

支持中国红客联盟(ihonker.org)

Micah 发表于 2015-12-9 21:04:32

学习学习技术,加油!

H.U.C—Prince 发表于 2015-12-10 18:42:45

还是不错的哦,顶了

fireworld 发表于 2015-12-12 06:16:35

还是不错的哦,顶了

cl476874045 发表于 2015-12-12 13:10:47

支持,看起来不错呢!

菜鸟小羽 发表于 2015-12-13 08:26:31

感谢楼主的分享~

fireworld 发表于 2015-12-13 16:31:21

感谢楼主的分享~

xiaoqqf4 发表于 2015-12-13 18:09:10

学习学习技术,加油!
页: [1] 2 3 4 5 6 7 8 9 10
查看完整版本: Ajax省市联动(上)