AJAX的post或者get服务器请求
AJAX的post或者get服务器请求:
XMLHttpRequest 对象用于和服务器交换数据。
如果想要将请求发送到服务器，需要使用XMLHttpRequest对象的open()和send()方法。
| 属性 | 描述 |
| open(method,url,async) | 规定请求的类型、URL 以及是否异步处理请求。 （1）.method:请求的类型；GET或POST。 （2）.url:文件在服务器上的位置。 （3）.async:true（异步）或 false（同步）。 |
| send(string) | 将请求发送到服务器。 string:仅用于 POST 请求 |
一.get和post区别:
get方式可能速度比较快，并且适用性也很强，但是很多时候还是需要用post。
推荐使用post方式的场景如下:
（1）.不期望使用缓存文件（更新服务器上的文件或数据库）。
（2）.向服务器发送大量数据（POST没有数据量限制）。
（3）.发送包含未知字符的用户输入时，POST比GET更稳定也更可靠。
二.get方式:
先看一个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.php.cn/" />
<title>php中文网</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>在上面的代码中，点击按钮可以获取服务器的当前日期时间，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);
}
}
}特别说明:上面的方式在IE浏览器可能会从缓存中读取数据，也就是说当第一点击按钮正常获取时间日期之后，以后的点击会没有任何效果，在谷歌或者火狐等浏览器中并没有此中问题，解决方案如下:
<!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中文网</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>解决方式非常的简单，就是在url后面添加一个随机数就可以了，这样每次请求都被认为是一个新的url，于是就不会缓存了。
也可以使用GET方式发送信息，可以通过url发送信息，代码如下:
<!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.php.cn/" />
<title>php中文网</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中文网")+"&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>点击按钮可以获取指定的内容，下面是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("欢迎来到" + webName + "，本站已经成立" + age + "周年。");
}
}
}三.POST 请求:
看一段代码实例:
<!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.php.cn/" />
<title>php中文网</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方式获取服务器的当前时间日期，不存在使用get方式的缓存问题。
如果需要像HTML表单那样POST数据，可以使用setRequestHeader()来添加HTTP头，然后在send()方法中规定发送的数据:
<!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.php.cn/" />
<title>php中文网</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中文网&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> 
面对疾风吧
你是让我查看啥效果？
7年前 添加回复 0