原生ajax

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EMS</title>
    <style type="text/css">
        #ems{
            position: absolute;
            left: 50%;
            width: 400px;
            height: auto;
            margin-left: -200px;
            background: lightGreen;
            text-align: center;
            min-height: 50px;
            height: 500px;
            overflow-y: scroll;
            overflow-x: hidden;
        }
        #ems input{
            height: 25px;
            margin-top: 10px;
        }
        #list{
            background: lightBlue;
        }
        #list li{
            text-align: left;
        }
    </style>

</head>
<body>
<div id="ems">
    <div>
        <input type="text" id="code">
        <input type="button" value="查询" id="btn">
    </div>
    <div id="list">
    </div>
</div>
<script type="text/javascript">

function ajax(data){
    //data={data:"",dataType:"xml/json",type:"get/post"，url:"",asyn:"true/false",success:function(){},failure:function(){}}

    //data:{username:123,password:456}
    //data = 'username=123&password=456';
    //第一步：创建xhr对象
    var xhr = null;
    if(window.XMLHttpRequest){//标准的浏览器
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    //第二步：准备发送前的一些配置参数
    var type = data.type == 'get'?'get':'post';
    var url = '';
    if(data.url){
        url = data.url;
        if(type == 'get'){
            url += "?" + data.data + "&_t="+new Date().getTime();
        }
    }
    var flag = data.asyn == 'true'?'true':'false';
    xhr.open(type,url,flag);

    //第三步：执行发送的动作
    if(type == 'get'){
       xhr.send(null);
    }else if(type == 'post'){
       xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
       xhr.send(data.data);
    }

    //第四步：指定回调函数
    xhr.onreadystatechange = function(){
        if(this.readyState == 4){
            if(this.status == 200){
                if(typeof data.success == 'function'){
                    var d = data.dataType == 'xml'?xhr.responseXML:xhr.responseText;
                    data.success(d);
                }
            }else{
                if(typeof data.failure == 'function'){
                    data.failure();
                }
            }
        }
    }

}

    window.onload = function(){
        //注册按钮单击事件
        var btn = document.getElementById('btn');
        btn.onclick = function(){
            var param = {
                url:'http://cdn.weather.hao.360.cn/api_weather_info.php?app=hao360&_jsonp=weather&code=101010100',
                type:'get',
                dataType:'json',
                success:function(data){
                    alert(data);
                }
            };
            ajax(param);
        }
    }
</script>
</body>
</html>

用jquery实现ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="button" value="点击" id="btn">
    <div id="showInfo"></div>
    <script type="text/javascript" src="jquery-1.11.2.js"></script>
    <script type="text/javascript">
        $(function () {
            // body...
            $("#btn").click(function(){
                //alert(12);
                $.ajax({
                    url:"01data.php",
                    dataType:"html",
                    type:"get",
                    success:function(data){
                        $("#showInfo").html(data);
                    },error:function(e){
                        alert(e);
                    }
                });
            })
        });
    </script>
</body>
</html>