前端学习(2858):简单秒杀系统学习之发送ajax请求之post

<html>
  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript">
    var xmlHttpRequest = null;
	var url = "http://localhost/miao/second.php";
    function ajaxRequest()
    {
        if(window.ActiveXObject) // IE浏览器
        {
            xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        }
        else if(window.XMLHttpRequest) // 除IE以外的其他浏览器
        {
            xmlHttpRequest = new XMLHttpRequest();
        }
        if(null != xmlHttpRequest)
        {
            var v1 = document.getElementById("value1").value;
            var v2 = document.getElementById("value2").value;
            xmlHttpRequest.open("POST", url, true);
            // 当发生状态变化时就调用这个回调函数
            xmlHttpRequest.onreadystatechange = ajaxCallBack;
            // 使用post提交时必须加上下面这行代码
            xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            // 向服务器发出一个请求
            xmlHttpRequest.send("v1=" + v1 + "&v2=" + v2);
        }
    }

    function ajaxCallBack()
    {
        if(xmlHttpRequest.readyState == 4)
        {
            if(xmlHttpRequest.status == 200)
            {
                var content = xmlHttpRequest.responseText;
                document.getElementById("div1").innerHTML = content;
            }
        }
    }
  </script>
  </head>
  <body>

    <input type="button" value="get content from serve" onclick="ajaxRequest()"/><br>
    <input type="text" id="value1"/><br>
    <input type="text" id="value2"/>
    <div id="div1"></div>
</body>
</html>

上一篇:AJAX浏览器支持


下一篇:原生ajax请求的步骤