AJAX的post或者get服務(wù)器請(qǐng)求
AJAX的post或者get服務(wù)器請(qǐng)求:
XMLHttpRequest 對(duì)象用于和服務(wù)器交換數(shù)據(jù)。
如果想要將請(qǐng)求發(fā)送到服務(wù)器，需要使用XMLHttpRequest對(duì)象的open()和send()方法。
| 屬性 | 描述 |
| open(method,url,async) | 規(guī)定請(qǐng)求的類(lèi)型、URL 以及是否異步處理請(qǐng)求。 （1）.method:請(qǐng)求的類(lèi)型；GET或POST。 （2）.url:文件在服務(wù)器上的位置。 （3）.async:true（異步）或 false（同步）。 |
| send(string) | 將請(qǐng)求發(fā)送到服務(wù)器。 string:僅用于 POST 請(qǐng)求 |
一.get和post區(qū)別:
get方式可能速度比較快，并且適用性也很強(qiáng)，但是很多時(shí)候還是需要用post。
推薦使用post方式的場(chǎng)景如下:
（1）.不期望使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫(kù)）。
（2）.向服務(wù)器發(fā)送大量數(shù)據(jù)（POST沒(méi)有數(shù)據(jù)量限制）。
（3）.發(fā)送包含未知字符的用戶(hù)輸入時(shí)，POST比GET更穩(wěn)定也更可靠。
二.get方式:
先看一個(gè)get方式代碼:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="author" content="http://www.miracleart.cn/" />
<title>php中文網(wǎng)</title>
<script>
function loadXMLDoc() {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("show").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "demo/ajax/net/demo.aspx", true);
xmlhttp.send();
}
window.onload = function () {
var obt = document.getElementById("bt");
obt.onclick = function () {
loadXMLDoc();
}
}
</script>
</head>
<body>
<div>
<div id="show"></div>
<input id="bt" type="button" value="查看效果"/>
</div>
</body>
</html>在上面的代碼中，點(diǎn)擊按鈕可以獲取服務(wù)器的當(dāng)前日期時(shí)間，c#代碼如下:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace ajax
{
public partial class demo : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Response.Write(System.DateTime.Now);
}
}
}特別說(shuō)明:上面的方式在IE瀏覽器可能會(huì)從緩存中讀取數(shù)據(jù)，也就是說(shuō)當(dāng)?shù)谝稽c(diǎn)擊按鈕正常獲取時(shí)間日期之后，以后的點(diǎn)擊會(huì)沒(méi)有任何效果，在谷歌或者火狐等瀏覽器中并沒(méi)有此中問(wèn)題，解決方案如下:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="author" content="http://www.softwhy.com/" />
<title>php中文網(wǎng)</title>
<script>
function loadXMLDoc() {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("show").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "demo/ajax/net/demo.aspx?rnd=" + Math.random(), true);
xmlhttp.send();
}
window.onload = function () {
var obt = document.getElementById("bt");
obt.onclick = function () {
loadXMLDoc();
}
}
</script>
</head>
<body>
<div>
<div id="show"></div>
<input id="bt" type="button" value="查看效果"/>
</div>
</body>
</html>解決方式非常的簡(jiǎn)單，就是在url后面添加一個(gè)隨機(jī)數(shù)就可以了，這樣每次請(qǐng)求都被認(rèn)為是一個(gè)新的url，于是就不會(huì)緩存了。
也可以使用GET方式發(fā)送信息，可以通過(guò)url發(fā)送信息，代碼如下:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="author" content="http://www.miracleart.cn/" />
<title>php中文網(wǎng)</title>
<script>
function loadXMLDoc() {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("show").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "demo/ajax/net/demoPara.aspx?webName="+escape("php中文網(wǎng)")+"&age=3", true);
xmlhttp.send();
}
window.onload = function () {
var obt = document.getElementById("bt");
obt.onclick = function () {
loadXMLDoc();
}
}
</script>
</head>
<body>
<div>
<div id="show"></div>
<input id="bt" type="button" value="查看效果"/>
</div>
</body>
</html>點(diǎn)擊按鈕可以獲取指定的內(nèi)容，下面是c#代碼:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace ajax
{
public partial class demoPara : System.Web.UI.Page
{
string webName;
int age;
protected void Page_Load(object sender, EventArgs e)
{
webName =Server.UrlDecode(Request.QueryString["webName"]);
age = Convert.ToInt32(Request.QueryString["age"]);
Response.Write("歡迎來(lái)到" + webName + "，本站已經(jīng)成立" + age + "周年。");
}
}
}三.POST 請(qǐng)求:
看一段代碼實(shí)例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="author" content="http://www.miracleart.cn/" />
<title>php中文網(wǎng)</title>
<script>
function loadXMLDoc() {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("show").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("POST", "demo/ajax/net/demo.aspx", true);
xmlhttp.send();
}
window.onload = function () {
var obt = document.getElementById("bt");
obt.onclick = function () {
loadXMLDoc();
}
}
</script>
</head>
<body>
<div>
<div id="show"></div>
<input id="bt" type="button" value="查看效果"/>
</div>
</body>
</html>上面的代碼利用post方式獲取服務(wù)器的當(dāng)前時(shí)間日期，不存在使用get方式的緩存問(wèn)題。
如果需要像HTML表單那樣POST數(shù)據(jù)，可以使用setRequestHeader()來(lái)添加HTTP頭，然后在send()方法中規(guī)定發(fā)送的數(shù)據(jù):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="author" content="http://www.miracleart.cn/" />
<title>php中文網(wǎng)</title>
<script>
function loadXMLDoc() {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("show").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("POST", "demo/ajax/net/postParam.aspx", true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("webName=php中文網(wǎng)&age=3");
}
window.onload = function () {
var obt = document.getElementById("bt");
obt.onclick = function () {
loadXMLDoc();
}
}
</script>
</head>
<body>
<div>
<div id="show"></div>
<input id="bt" type="button" value="查看效果"/>
</div>
</body>
</html> 
