XMLHttpRequest对象的属性及简要说明
名称 |
说明 |
readyState |
通信的状态,当XMLHttpRequest对象把一个HTTP请求发送到服务器,到接收到服务器响应信息,整个过程将经历5种状态,该属性取值为为0-4 |
onreadystatechange |
设置回调事件处理程序,当readyState属性的值改变时,会激发此事件 |
responseText |
服务器返回的text/html格式的文档 |
responseXML |
服务器返回的text/xml格式的文档 |
status |
描述了HTTP响应short类型的状态代码,100表示Continue, 101表示Switching protocols数据交换,200表示执行正常,404表示未找到页面,500表示内部程序错误 |
statusText |
HTTP响应的状态代码对应的文本(OK, not found) |
代码 |
说明 |
0 |
代表未初始化的状态。创建了一个XMLHttpRequest对象,尚未初始化 |
1 |
代表连接状态,已经调用了open方法,并且已经准备好发送请求 |
2 |
代表发送状态,已经调用了send方法发出请求,尚未得到响应结果 |
3 |
代表正在接收状态,已经接收了HTTP响应的头部信息,正在接收响应内容 |
4 |
代表已加载状态,此时响应内容已完全被接收 |
代码如下:
代码如下:
var xmlRequest;
function CreateRequest()
{
/* 创建XMLHttpRequest对象 */
if(window.ActiveXObject)
{
return new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
return new XMLHttpRequest();
}
}
function ResponseHandler()
{
if(xmlRequest.readyState == 4 && xmlRequest.status == 200)
{
/* 如果通信成功,并且响应正常,执行以下操作 */
var reqCOntent= xmlRequest.responseText;
document.getElementById("browser").innerHTML = reqContent;
document.getElementById("content").value = reqContent;
}
}
function AjaxAccess()
{
/* 异步请求百度首页 */
xmlRequest = CreateRequest(); //创建XMLHttpRequest对象
xmlRequest.Onreadystatechange= ResponseHandler; //设置回调函数
xmlRequest.open("GET","http://www.baidu.com"); //初始化请求对象
xmlRequest.send(null); //发送请求信息
/* 触发事件以后提示正在打开百度首页 */
var brow = document.getElementById("browser");
brow.innerHTML = "
代码如下:
function(XMLHttpRequest) {
this; /*这里this关键字用于访问.ajax()方法的options参数对象*/
}
complete: 请求完成后的事件,无论请求成功与否,都将触发该事件。
function(XMLHttpRequet, textStatus) {
this; /*这里this关键字用于访问.ajax()方法的options参数对象*/
}
textStatus参数返回当前请求的执行状态(succss和error等)
success: 请求执行成功时的事件。
function(data, textStatus) {
this; /*这里this关键字用于访问.ajax()方法的options参数对象*/
}
error: 请求执行失败时的事件
function(XMLHttpRequest, textStatus, errorThrown) {
this; /*这里this关键字用于访问.ajax()方法的options参数对象*/
}
global: 是否触发全局Ajax事件,该属性为Boolean类型,默认值为false
代码如下:
$(document).ready(function(){
$("#Access").click(function(){
var xmlReq = $.ajax({
type:'GET',
url:'http://www.sougou.com',
success:function(reqContent)
{
$("#browser").html(reqContent);
$("#content").text(reqContent);
}});
$("#browser").html("
代码如下:
代码如下:
$(document).ready(function(){
$("#refresh").click(function(){
/* 要访问的页面URL,根据你实际情况做相应修改 */
var url = "http://www.sogou.com";
$("#commentList").load(url); //加载相应内容
});
});
代码如下:
var xmlReq = $.get(url, [data], [callback], [type]);
$.get("www.baidu.com",
{
user: 'zhangsan'
}
);
callback: function(data, textStatus) {}
代码如下:
分类:
代码如下:
$(document).ready(function(){
$("#Search").click(function(){
/* 使用Get方式请求指定URL */
$.get("http://localhost:2154/Web/BlogList.aspx",
{
key : $("#blogClass").val()
},
function(data){
$("#blogList").html(data);
});
});
$("#Search").click(); //触发一次单击事件
});
代码如下:
<%@ Page Language="C#" %>
<%
/*
* 分别向数组里添加一些数据,
* 这些数据一般来自数据库,
* 这里只是模拟,就静态添加了
*/
string[] blogClass = { "CSS", "CSS", ".NET", ".NET", ".NET", ".NET" };
string[] blogTitle = { "CSS中的padding", "CSS入门", "C#中的类",
"C#基础知识", "C#面向对象", "C#设计模式" };
string key = Request["key"]; //获取请求服务器的关键字
/*
* 遍历数组集合
*/
for (int i = 0; i
/*
* 如果关键字为空,显示所有的记录
* 如果关键字等于分类名称,显示该分类下的记录
*/
if (key == null || key == string.Empty || key == blogClass[i])
{
%>
<%= blogClass[i]%><%= blogTitle[i]%>
<%
}
}
%>
代码如下:
代码如下:
$(document).ready(function(){
$("#submit").click(function(){
$.post("http://localhost:2154/Web/Login.aspx",
{
username : $("input[name='username']").val(),
password : $("input[name='password']").val()
},
function(data){
$("#login").html(data);
});
});
});
代码如下:
<%@ Page Language="C#" %>
欢迎你 <%= Request.Form["username"] %>
你的身份是 管理员
代码如下:
Name | Age | Sex |
代码如下:
$(document).ready(function(){
/* 异步请求,载入 JSON 数据 */
$.getJSON("http://localhost:2154/Web/PeopleList.aspx",
function(data){
/* 遍历请求结果 */
$.each(data,
function(index, p){
var html = "
代码如下:
<%@ Page Language="C#" %>
[{
"name" : "David li",
"age" : 61,
"isMale" : true
},{
"name" : "Michael Clinton",
"age" : 53,
"isMale" : true
},{
"name" : "Brook Ann",
"age" : 23,
"isMale" : false
},{
"name" : "Mary Johnson",
"age" : 35,
"isMale" : false
},{
"name" : "Elizabeth Jones",
"age" : 33,
"isMale" : false
},{
"name" : "James Smith",
"age" : 25,
"isMale" : true
}]
代码如下:
代码如下:
$(document).ready(function(){
$("#input").click(function(){
$.getScript("Test.js?6.1.3", function(data){
showMsg();
});
});
});
代码如下:
function showMsg(){
alert("This is Message");
}
代码如下:
Username: | |
Age: | |
Sex: | |
Email: | |
Details: | |
代码如下:
$(document).ready(function(){
$("button[name='btnSubmit']").click(function(){
$.post("http://localhost:2154/Web/Register.aspx",
$("form").serialize(), //序列化表单数据
function(data){
$("table tbody").append("
代码如下:
<%@ Page Language="C#" %>
Username:<%= Request["username"] %>
Age:<%= Request["age"] %>
IsMale:<%= Request["isMale"]%>
Email:<%= Request["email"]%>
Details:<%= Request["details"]%>
代码如下:
[
{"name": "name1" , "value": "value1"},
{"name": "name2" , "value": "value2"},
{"name": "name3" , "value": "value3"}
]
var jsOnData= $("form").serializeArray();
var textName = jsonData[0].name;
var textValue = jsonData[0].value;
代码如下:
$.ajaxSetup({
url: 'Test.html',
type: 'POST',
global: false, //禁止触发全局事件
dataType: 'json',
error: function(xhr, textStatus, errorThrown) {
alert(textStatus);
}
});
代码如下:
function(event, XHR, settings) {
event是触发的事件对象
XHR是XMLHttpRequest对象
settings是Ajax请求配置参数
}
代码如下:
代码如下:
$(document).ready(function(){
$("#show").ajaxStart(function(){
$(this).append("
Run ajaxStart
");Run ajaxStop
");Run ajaxComplete
");Run ajaxError
");Run ajaxSend
");Run ajaxSuccess
");