Ajax技术入门详解
一、Ajax简介
AJAX即“Asynchronous JavaScript and XML”（异步JavaScript和XML)，AJAX并非缩写词，而是由Jesse James Gaiiett创造的名词，是指一种创建交互式网页应用的网页开发技术。
一、Ajax简介
AJAX即“Asynchronous JavaScript and XML”（异步JavaScript和XML)，AJAX并非缩写词，而是由Jesse James Gaiiett创造的名词，是指一种创建交互式网页应用的网页开发技术。
1.同步交互和异步交互的理解
举个例子：普通B/S模式(同步) AJAX技术(异步)
同步：提交请求->等待服务器处理->处理完毕返回这个期间客户端浏览器不能干任何事
同步是指：发送方发出数据后，等接收方发回响应以后才发下一数据包的通讯方式。
异步: 请求通过事件触发->服务器处理（这时浏览器仍然可以作其他事情）->处理完毕
异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式
2.Ajax:一种不用刷新整个页面便可与服务器通讯的办法
二、Ajax的工作原理
1.Ajax的核心是JavaScript对象XmlHttpRequest
2.AJAX采用异步交互过程
AJAX在用户与服务器之间引入一个中间媒介，从而消除了网络交互过程中的处理—等待—处理—等待缺点。
用户的浏览器在执行任务时即装载了AJAX引擎。AJAX引擎用JavaScript语言编写，通常藏在一个隐藏的框架中。它负责编译用户界面及与服务器之间的交互。
AJAX引擎允许用户与应用软件之间的交互过程异步进行，独立于用户与网络服务器间的交流。现在，可以用Javascript调用AJAX引擎来代替产生一个HTTP的用户动作，内存中的数据编辑、页面导航、数据校验这些不需要重新载入整个页面的需求可以交给AJAX来执行
3.XMLHttpRequest对象
创建XMLHttpRequest对象（由于非标准所以实现方法不统一）
(1)Internet Explorer把XMLHttpRequest实现为一个ActiveX对象
(2)其他浏器（Firefox、Safari、Opera…）把它实现为一个本地JavaScript对象。
(3)XMLHttpRequest在不同浏览器上的实现是兼容的，所以可以用同样的方式访问XMLHttpRequest实例的属性和方法，而不论这个实例创建的方法是什么。
实例：
function getXhr(){
var xhr ;
try{//firefox,opera浏览器
xhr = new XMLHttpRequest();
}catch(err){
try{//IE浏览器5.0
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}catch(er){
alert("您的浏览器版本太低了......");
}
}
return xhr;
}
4.XMLHttpRequest对象方法
方法描述
abort()
停止当前请求
getAllResponseHeaders()
把http请求的所有响应首部作为键/值对返回
getResponseHeader("headerLabel")
返回指定首部的串值
open(method,url,async)
规定请求的类型、URL 以及是否异步处理请求。
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）
send(content)
向服务器发送请求
setRequestHeader("label", "value")
把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()
5.XMLHttpRequest对象属性
属性描述
onreadystatechange
存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
· 0: 请求未初始化
· 1: 服务器连接已建立
· 2: 请求已接收
· 3: 请求处理中
· 4: 请求已完成，且响应已就绪
status
200: "OK" 404: 未找到页面
responseText
获得字符串形式的响应数据。
Ajax技术实例
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title ></title>
<script src="jquery-1.7.1.min.js" type="text/javascript"></ script>
<script language="javascript">
$(document).ready(function ()
{
$('#send_ajax').click( function (){
var params=$('input' ).serialize(); //序列化表单的值
$.ajax({
url: 'DealData.aspx', //后台处理程序
type: 'post', //数据发送方式
dataType: 'json', //接受数据格式
data:params, //要传递的数据
success:update_page //回传函数(这里是函数名)
});
});
//$.post()方式：
$('#test_post').click( function (){
$.post(
'DealData.aspx',
{
username:$( '#input1').val(),
age:$( '#input2').val(),
sex:$( '#input3').val(),
job:$( '#input4').val()
},
function (data) //回传函数
{
var myjson='' ;
eval( 'myjson=' + data + ';' );
$( '#result').html("姓名:" + myjson.username + "<br/>工作:" + myjson[ 'job']);
}
);
});
//$.get()方式：
$('#test_get').click( function ()
{
$.get(
'DealData.aspx',
{
username:$( "#input1").val(),
age:$( "#input2").val(),
sex:$( "#input3").val(),
job:$( "#input4").val()
},
function(data) //回传函数
{
var myjson='' ;
eval( "myjson=" + data + ";" );
$( "#result").html(myjson.job);
}
);
});
});
function update_page (json) //回传函数实体，参数为XMLhttpRequest.responseText
{
var str= "姓名:"+json.username+"<br />" ;
str+= "年龄:"+json.age+"<br />" ;
str+= "性别:"+json.sex+"<br />" ;
str+= "工作:"+json.job+"<br />" ;
str+= "追加测试:" +json.append;
$("#result").html(str);
}
</script>
</head>
<body>
<div id="result" style="background :orange;border:1px solid red;width:300px;height :200px;"></div>
<form id="formtest" action="" method="post">
<p ><span> 输入姓名:</span ><input type="text" name="username" id="input1" /></p>
<p ><span> 输入年龄:</span ><input type="text" name="age" id="input2" /></p>
<p ><span> 输入性别:</span ><input type="text" name="sex" id="input3" /></p>
<p ><span> 输入工作:</span ><input type="text" name="job" id="input4" /></p>
</form>
<button id="send_ajax">提交 </button>
<button id="test_post">POST提交 </button>
<button id="test_get">GET提交 </button>
</body>
</html>
后台方法处理
public class Employee
{
public string username { get; set; }
public string age { get; set; }
public string sex { get; set; }
public string job { get; set; }
}
protected void Page_Load(object sender, EventArgs e)
{
string usernameTemp = null ;
string ageTemp = null ;
string sexTemp = null ;
string jobTemp = null ;
if (Request.HttpMethod == "POST" )
{
usernameTemp = HttpContext.Current.Request.Form["username" ];
ageTemp = HttpContext.Current.Request.Form["age" ];
sexTemp = HttpContext.Current.Request.Form["sex" ];
jobTemp = HttpContext.Current.Request.Form["job" ];
}
else
{
usernameTemp = HttpContext.Current.Request["username" ];
ageTemp = HttpContext.Current.Request["age" ];
sexTemp = HttpContext.Current.Request["sex" ];
jobTemp = HttpContext.Current.Request["job" ];
}
Employee emp = new Employee();
emp.username=usernameTemp;
emp.age=ageTemp;
emp.sex=sexTemp;
emp.job=jobTemp;
string strJSON = ToJson<Employee >(emp);
string strInfor = "{\"age\":\"adfads\",\"job\":\"asdfas\",\"sex\":\"asdfas\",\"username\":\"safsd\"}" ;
Employee em = Deserialize<Employee >(strInfor);
Response.Write(strJSON);
}
private string ToJson<T>(T obj)
{
DataContractJsonSerializer ds = new DataContractJsonSerializer(typeof (T));
MemoryStream ms = new MemoryStream();
ds.WriteObject(ms, obj);
string strJSON = Encoding .UTF8.GetString(ms.ToArray());
ms.Close();
return strJSON;
}
private T Deserialize<T>( string sJson) where T : class
{
DataContractJsonSerializer ds = new DataContractJsonSerializer(typeof (T));
MemoryStream ms = new MemoryStream( Encoding.UTF8.GetBytes(sJson));
T obj = (T)ds.ReadObject(ms);
ms.Close();
return obj;
}
扫一扫
466
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
