AJAX 异步请求

最新推荐文章于 2024-05-07 05:07:55 发布

蚊子987469

最新推荐文章于 2024-05-07 05:07:55 发布

阅读量526

点赞数

分类专栏： AJAX 异步请求文章标签： AJAX 异步请求

AJAX 异步请求专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.简单的介绍

2.get 和post 的比较

<title>GET VS. POST</title>
<script language="javascript">
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject)
  xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
else if(window.XMLHttpRequest)
  xmlHttp = new XMLHttpRequest();
}
function createQueryString(){
var firstName = document.getElementById("firstName").value;
var birthday = document.getElementById("birthday").value;
var queryString = "firstName=" + firstName + "&birthday=" + birthday;
return encodeURI(encodeURI(queryString)); //两次编码解决中文乱码问题
}
function doRequestUsingGET(){
createXMLHttpRequest();
var queryString = "9-3.aspx?";
queryString += createQueryString() + "&timestamp=" + new Date().getTime();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET",queryString);
xmlHttp.send(null);
}
function doRequestUsingPOST(){
createXMLHttpRequest();
var url = "9-3.aspx?timestamp=" + new Date().getTime();
var queryString = createQueryString();
xmlHttp.open("POST",url);
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send(queryString);
}
function handleStateChange(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
  var responseDiv = document.getElementById("serverResponse");
  responseDiv.innerHTML = decodeURI(xmlHttp.responseText); //解码
}
}
</script>
</head>

<body>
<h2>输入姓名和生日</h2>
<form>
<input type="text" id="firstName" /><br>
<input type="text" id="birthday" />
</form>
<form>
<input type="button" value="GET" οnclick="doRequestUsingGET();" /><br>
<input type="button" value="POST" οnclick="doRequestUsingPOST();" />
</form>
<div id="serverResponse"></div>
</body>