javascrpt 中的Ajax请求

回顾下javascript中的Ajax请求，写一个小例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh" dir="ltr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="generator" content="Editplus4PHP" />
    <meta name="keywords" content="Leo, HentStudio, Editplus4PHP, LeoPHP" />
    <meta name="description" content="LeoPHP - Powered by HentStduio" />
    <meta name="author" content="Leo" />
    
    <script type="text/javascript" src="Public/Js/jquery-1.7.1.min.js"></script>
    <!--<link rel="stylesheet" type="text/css" href="css/style.css" />-->
   
    <link rel="shortcut icon" href="images/favicon.ico" />
    <title>Example | xHTML1.0</title>
</head>
<body>
    <div>
        省份
        <select name="pro" id="pro" onChange="getClass(this.value)">
            <option value="1">北京</option>
            <option value="2">上海</option>
        </select>
        <select name="city" id="city_1">
            <option value="1">朝阳</option>
        </select>
    </div>
</body>
</html>
<script>
function getClass(val){
    creatXMLHttpRequest();
    var pro = val;
    var url = "f.php?pro="+pro;//url地址，
    xmlReq.open("GET",url,false);//以GET的方式访问
    xmlReq.onreadystatechange  = OnMassageBack;//设置回调函数
    xmlReq.send(null);
}
//回调函数
function OnMassageBack(){
    if(xmlReq.readyState == 4 && xmlReq.status == 200){//调用成功，返回结果
        sum = xmlReq.responseText;
        alert(sum);
    }
}
// 创建一个ActiveXObject 对象使现局部请求到服务器 
function creatXMLHttpRequest(){
    if(window.XMLHttpRequest){
        xmlReq = new XMLHttpRequest();
        if(xmlReq.overrideMimeType){
            xmlReq.overrideMimeType('text/xml'); 
        }
    }else if(window.ActiveXObject){
        try{
            xmlReq = new ActiveXObject('Msxml2.XMLHTTP'); 
        }
        catch(e){
            try{
                xmlReq = new ActiveXObject('Microsoft.XMLHTTP');
            }
            catch(e){

            }
        }
    }
}
</script>
View Code

f.php页面是用来处理请求的： （这里我只做了简单的返回）

<?php
<?php
$s = $_GET['pro'];
$res = "Hello ".$s;
echo $res;
?>
?>
View Code

posted @ 2013-10-21 12:52  泡沫幻想  阅读(199)  评论(0)  编辑  收藏  举报