XMLHttpRequest对象:
Ajax学习记录
原创
©著作权归作者所有:来自51CTO博客作者zyhlwzy的原创作品,请联系作者获取转载授权,否则将追究法律责任
该对象是处理所有服务器通信的对象。通过XMLHttpRequest对象与服务器进行对话的是javascript技术。这不是一般的应用程序流,这恰恰是ajax的强大之处。
ajax基本上就是将javascript和XMLHttpRequest对象放在WEB表单与服务器之间,当用户填写好表单之后并不是将表单数据直接发送给服务器,而是通过javascript获取表单数据并向服务器发送请求,同时用户屏幕并不会闪烁,消失或者延迟。换句话说,javascript代码向服务器发送请求是幕后操作的,用户甚至不知道请求的发出,而且javascript向服务器发送请求时异步的,在发送请求的同时用户可以继续浏览网页,滚动,或者使用应用程序。
当发送给服务器的数据经过一系列的逻辑处理之后,返回的数据同样是由javascript代码接受,而当接收到后台返回的数据时,javascript代码可以对该数据进行进一步的操作,可以迅速的更新表单数据,让人感觉到应用程序是立即完成的,同时可以对数据进行进一步的运算,再发送另一个请求,而这一切的处理都是不需要用户干预的,这就是XMLHttpRequest对象的强大之处,他可以根据需要自行与服务器进行交互,用户甚至完全不知道幕后所发生的一切。结果就是类似于桌面应用程序的动态、快速响应、高交互性的体验,但是背后又拥有互联网的全部强大力量。
创建XMLHttpRequest对象:
var httprequest = new XMLHttpRequest();
javascript的基本任务
1、获取表单数据
2、修改表单数据(更行表单数据)
3、解析HTML和XML
对于不同的浏览器,声明XMLHttpRequest对象的方法是有差异的,在IE中,由于可能安装的javascript版本可能不同,所以声明XMLHttpRequest对象的方法也有所不同,声明对象的方法为:
使用Microsoft 浏览器
var xmlhttp = false;
try
{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
xmlhttp = new ActiveXObject("Macrosoft.XMLHTTP");
}
catch(e2)
{
xmlhttp = false;
}
}
使用非microsoft浏览器:
var xmlhttp = false;
try
{
xmlhttp = new XMLHttpRequest();
}
支持多浏览器的声明方法:
var xmlhttp = false;
try
{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
xmlhttp = new ActiveXObject("Macrosoft.XMLHTTP");
}
catch(e2)
{
xmlhttp = false;
}
}
if(!xmlhttp && typeof(XMLHttpRequest) != 'undefined')
{
xmlhttp = new XMLHttpRequest();
}
完整的ajax实例
<!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 callserver() {
//声明XMLHttpRequest对象
var xmlhttp = false;
try {
xmlhttp = new ActiveXObject("Mxml2.XMLHTTP");
}
catch (e) {
try {
xmlhttp = new ActiveXObject("Macrosoft.XMLHTTP");
}
catch (e2) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof (XMLHttpRequest) != 'undefined') {
xmlhttp = new XMLHttpRequest();
}
else {
alert("创建XMLHttpRequest对象出错!");
}
//向服务器发送请求
xmlhttp.open("post", "Getdata.ashx?ts=" + new Date(), false); //准备向服务器的Getdate.ashx发出post请求
//监听onreadystatechange()事件,当 readyState 为 3 时,它也可能调用多次。
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
var result = xmlhttp.responseText;
document.getElementById("txtbox1").value = result;
}
}
};
xmlhttp.send();
}
</script>
</head>
<body>
<input type="text" id="txtbox1" style="width:300px;" />
<input type="button" value="ajax提交" />
</body>
</html>
Getdata.ashx中处理
namespace WebApplication1.html
{
/// <summary>
/// Getdata 的摘要说明
/// </summary>
public class Getdata : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//context.Response.Write("Hello World");
string ts = context.Request["ts"];
context.Response.Write(ts);
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
判断用户是否已经注册实例(jquery)
当文本框失去焦点判断用户名是否已经存在
<asp:TextBox ID="LoginName" runat="server" CssClass="txtstyle"></asp:TextBox>
<span id="usernamerepeat" style="color:Red;">用户名已经存在!</span>
jquery代码:
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#usernamerepeat").hide();
var UsernameId = "<%=LoginName.ClientID %>";
var id = "#" + UsernameId;
$(id).blur(function () {
var username = $(id).val();
$.post("RegisterHandle.ashx", { "username": username }, function (data, status) {
if (status == "success") {
if (data == "1") {
$("#usernamerepeat").show();
}
else {
$("#usernamerepeat").hide();
}
}
else {
alert("ajax错误!");
}
});
});
});
</script>
RegisterHandle.ashx处理代码:
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//context.Response.Write("Hello World");
string UserName = context.Request["username"];
SqlConnection con = new SqlConnection();//声明管道
con.ConnectionString = System.Configuration.ConfigurationManager.ConnectionStrings["con"].ToString();//连接数据库管道
con.Open();//打开管道
SqlCommand cmd = new SqlCommand();
cmd.CommandText = "select * from Users where UserName=@UserName";//查询
cmd.Parameters.AddWithValue("@UserName", UserName);
cmd.Connection = con;//实行管道通讯
SqlDataReader reader = cmd.ExecuteReader();
if (reader.Read())
{
context.Response.Write("1");
}
else
{
context.Response.Write("0");
}
}
上一篇:XMLHttpRequest对象
下一篇:.Net Framework
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
Git 学习记录 03
计算机新手的 git 学习记录
git 文件编辑器 版本控制系统 -
Learn C the hard way 学习记录 习题0
计算机新手笨方法学习C语言的博客记录
笨方法学C语言 Learn C the hard way Ubuntu虚拟机安装 -
Ajax学习---Ajax基础学习 180128
Ajax学习---Ajax基础学习 180128
ajax xml 服务器 -
Ajax学习-Ajax简介
Ajax简介
职场 Ajax 休闲 -
[Ajax]ajax学习与理解
1.新建demo.aspx页面。2.首先在该页面的后台文件demos.aspx.
json ajax List -
ajax学习笔记
初识ajax
ajax js -
ajax学习小结
ajax学习小结
xml 用户名 html 服务器 客户端