|
XMLHttpRequest和ActiveXObject的区别
XMLHttpRequest和ActiveXObject学习
XMLHttpRequest 对象
11 个最常用的 AJAX 开发框架汇总
XMLHttpRequest 对象：
open()：建立到服务器的新请求。
send()：向服务器发送请求.
abort()：退出当前请求。
readyState：提供当前 HTML 的就绪状态。
responseText：服务器返回的请求响应文本。
async: true(false) ajax同步请求和异步请求的差异
GET的目的就如同其名字一样是用于获取信息的。它旨在显示出页面上你要阅读的信息。浏览器会缓冲GET请求的执行结果，如果同样的GET请求再次发出，浏览器就会显示缓冲的结果而不是重新运行整个请求。这一流程不同于浏览器的处理过程，但是它是有意设计成这样以使GET调用更有效率。GET调用会检索要显示在页面中的数据，数据不会在服务器上被更改，因此重新请求相同数据的时候会得到相同的结果。
POST方法应该用于你需要更新服务器信息的地方。如某调用要更改保存在服务器上的数据，而从两个同样的POST调用返回的结果或许会完全不同，因为第二个POST调用的值与第一个的值不相同，这是由于第一个调用已经更新了其中一些值。POST调用通常会从服务器上获取响应而不是保持前一个响应的缓冲。
用jquery 封装的ajax请求
html页
<html>
<head>
<title></title>
<script src="js/jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript">
function btnClick() {
$.ajax({
url: "Handler1.ashx",//请求的地址
type: "Post",//请求的类型。
async: true,//(默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行
timeout: 1000,//设置请求超时时间（毫秒）。此设置将覆盖全局设置。(如果请求超过1000毫米，请求就会结束)
dataType: "text",//可选。规定服务器返回数据的类型;，如果不写这段代码，那么会默认智能判断（xml、json、script 或 html）。
data: "id=2&UserName=张三 ",//url后面跟的参数，实际上就是 Handler1.ashx?id=2&UserName=张三。 语法形式也可以是json格式如: {"argName":"argValue"} es:{"id":"123","sex":"男"}
//data: {"username":"wowo"},success: function (data,textStatus) { //这个data 其实就是服务器返回给我们的数据集 可以是字符串，也可以是一个json等。总之它是根据dataType参数进行处理后的数据 。第二个参数textStatus为服务器的状态，是可选参数；</span>当Response的返回状态是"success"时才调用该方法。即textStatus==success时；才会执行这个回调函数里的内容
$("#text1").val(data + textStatus);
console.log("data------",data),console.log("textStatus-------------",textStatus)
},error: function (XMLHttpRequest,textStatus,errorThrown) {//每当一个Ajax请求出错时，就会触发error回调函数。这个回调函数中有三个参数:【第一个参数】：是一个XMLHttpRequest 对象;【第二个参数】: 是错误信息；它的值可能为 null，还可能是 "timeout","error","notmodified" 和 "parsererror"等字符串。【第三个参数】：当一个HTTP错误发生时，errorThrown 接收HTTP状态的文本部分，比如： "Not Found"（没有找到） 或者 "Internal Server Error."（服务器内部错误）等等。 如果想测试这个error回调函数，可以将上面的url地址写错，写一个不存在的url地址就会跳到error这个回调函数中来了
//第一个参数因为是一个XMLHttpRequest对象。既然是一个对象就可能会有属性，和方法。要了解它的属性和方法可以参考http://www.cnblogs.com/beniao/archive/2008/03/29/1128914.html
alert(XMLHttpRequest.status) //打印出当前请求的Http状态码 例如：200,403,405 ，505等等。
// readyState是请求的状态，它有5个值：0=请求未初始化；1=服务已连接；2=服务接收到请求；3=执行请求；4=完成，即数据接收完毕；
alert(XMLHttpRequest.statusText); //打印出当前请求的响应行状态 。
alert(XMLHttpRequest.readyStatus); //打印出当前请求的状态
alert("错误");
}
});
}
</script>
</head>
<body>
<input type="text" id="text1" name="li"/><input type="button" onclick="btnClick()" />
</body>
</html>
服务端代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace AJAX_Dome2
{
/// <summary>
/// Handler1 的摘要说明
/// </summary>
public class Handler1 : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string name= context.Request["username"];
context.Response.Write("Hello World"+name);
//throw new Exception("anbc");
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
原生AJAX请求
ajax请求页 HTMLPage1.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
function btnClick() {
//var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //创建XMLHTTP对象，相当于WebClient。老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象 而新版本的任何浏览器都是支持下面所有现代浏览器都内建了 XMLHttpRequest 对象。所以一般情况下，我们都用XMLHttpRequest。所以，这一句可以用下面的var xmlhttp = new XMLHttpRequest()来替代
var xmlhttp = new XMLHttpRequest(); //通过XMLHttpRequest对象来和服务器进行通信;在与服务器进行异步数据传输时,传输的数据更少;更好的用户体验.
if (!xmlhttp) { //如果没有成功创建XMLHTTP对象，即创建失败，就弹出失败消息
alert("创建xmlhttp对象异常");
return false;
}
//注意如果是get 请求的话，它一般会自动给我们缓存。如果缓存了当前的数据，那么当我们第二次请求的时候，它是直接去取缓存中的数据，而不会再次请求了。而POST请求一般是不给我们缓存的。所以建议ajax最好用POST 请求，如果实在要用GET，也可以这样写xmlhttp.open("get","Handler1.ashx?ts"+new Date(),false) //第三个参数那个false的意思是表示同步发送请求； 如果要异步发送去请求的话，将false改成true就可以了。默认是true,即：异步请求。 注意：如果open()里第一个参数是get的话，即这个是一个get请求，而get请求是通过url传参的。所有如果有参数的话，就要放在第二个参数后面，以?隔开。
xmlhttp.open("POST","Handler1.ashx",false)//准备向服务器Handler1.ashx发出POST请求
//-------------------------------------------------------------------------------------
//注意：如果这个Ajax请求是一个POST请求的话，最好加上下面这句话。否则有可能出问题。
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=gb2312") //Content-Type:application/x-www-form-urlencoded含义是表示客户端提交给服务器文本内容的编码方式 是URL编码; charset=gb2312表示当前文档的字符集是采用charset=gb2312的字符(当然也有其他的如 utf-8等等)
//注意：如果这个Ajax请求是一个Get请求的话，最好加上这一句。
xmlhttp.setRequestHeader("If-Modified-Since","0") //将IfIf-Modified-Since的值设为0 ，表示告诉服务器，我这边没有缓存，也不需要缓存。这时候服务器就会执行代码，取出最新的数据给你。 这段代码的意思就是：设置浏览器不使用缓存。
//--------------------------------------------------------------------------------------
//XMLHTTP默认(也推荐)不是同步请求的，也就是Open方法并不像WebClinet的DownloadString那样吧服务器返回的数据拿到才返回，是异步的，因此需要监听onreadystatechange事件
xmlhttp.onreadystatechange = function () { //注册一个事件
// readyState是请求的状态，它有5个值：0=请求未初始化；1=服务已连接；2=服务接收到请求；3=执行请求；4=完成，即数据接收完毕；
if (xmlhttp.readyState == 4) { //数据接收完毕，此时可以通过通过responseBody和responseText获取完整的回应数据
if (xmlhttp.status == 200) {//如果状态码为200 则异步请求成功
document.getElementById("txt1").value = xmlhttp.responseText; //responseText属性为服务器返回的文本，即字符串
}
else {
alert("ajax服务器返回错误");
}
}
}
xmlhttp.send(); //这个时候才是开始发送请求
//注意：如果这个Ajax请求是一个Get请求的话以上就可以了。或者xmlhttp.send(null);
//但是如果这个Ajax请求是一个Post请求，而且又带参数的时候就可以一下这样
//xmlhttp.send("UserName=zhangsan&Age=26")
}
</script>
</head>
<body>
<input type="text" id="txt1" />
<input type="button" value="提交" onclick="btnClick()" />
</body>
</html>
处理页Handler1.ashx（服务器）
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace AJAX
{
/// <summary>
/// Handler1 的摘要说明
/// </summary>
public class Handler1 : IHttpHandler
{
/// <summary>
/// 在页面输出当前时间
/// </summary>
/// <param name="context"></param>
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/html";
//context.Response.Write("Hello World");
context.Response.Write(DateTime.Now);
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
原生AJAX请求示例
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<示例> HTML请求页 HTMLPage1.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function btn_click() {
//创建XMLHttpRequest对象
var xmlHttp = new XMLHttpRequest();
//获取值
var username = document.getElementById("txt_username").value;
var age = document.getElementById("txt_age").value;
//配置XMLHttpRequest对象 。注意 因为这里的username有可能是一个中文字符串，所以要用encodeURI编码一下，否则会乱码
xmlHttp.open("post","Get.aspx?username=" + encodeURI(username)
+ "&age=" + age);
//设置回调函数
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
document.getElementById("result").innerHTML = xmlHttp.responseText;
}
}
//发送请求
xmlHttp.send(null);
}
</script>
</head>
<body>
<label for="txt_username">姓名:</label>
<input type="text" id="txt_username" /><br />
<label for="txt_age">年龄:</label>
<input type="text" id="txt_age" /><br />
<input type="button" value="提交" id="btn" onclick="btn_click();" />
<div id="result">
</div>
</body>
</html>
处理页Get.aspx （服务器）
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace AJAX_Dome
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender,EventArgs e)
{
Response.Clear();
string username = Request.QueryString["username"];
string age = Request.QueryString["age"];
Response.Write("姓名:" + username + "<br/>年龄:" + age + "<br/>时间:" + DateTime.Now.ToString() + "");
Response.End();
}
}
}
===============================================================================================
??
??
??
??
??
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
