Ajax提交数据（Get Post）详解和实例
2013-11-15 13:00
615 查看
Ajax技术入门详解
一、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
获得字符串形式的响应数据。
[align=left] [/align]
[align=left]Ajax技术实例[/align]
[align=left] [/align]
[align=left]<html xmlns="http://www.w3.org/1999/xhtml">[/align]
[align=left]<head runat="server">[/align]
[align=left] <title ></title>[/align]
[align=left] <script src="jquery-1.7.1.min.js" type="text/javascript"></ script>[/align]
[align=left] <script language="javascript"> [/align]
[align=left]$(document).ready(function ()[/align]
[align=left]{[/align]
[align=left] $('#send_ajax').click( function (){[/align]
[align=left] var params=$('input' ).serialize(); //序列化表单的值[/align]
[align=left] $.ajax({[/align]
[align=left] url: 'DealData.aspx', //后台处理程序[/align]
[align=left] type: 'post', //数据发送方式[/align]
[align=left] dataType: 'json', //接受数据格式[/align]
[align=left] data:params, //要传递的数据[/align]
[align=left] success:update_page //回传函数(这里是函数名)[/align]
[align=left] });[/align]
[align=left] });[/align]
[align=left]//$.post()方式：[/align]
[align=left]$('#test_post').click( function (){[/align]
[align=left] $.post([/align]
[align=left] 'DealData.aspx',[/align]
[align=left] {[/align]
[align=left] username:$( '#input1').val(),[/align]
[align=left] age:$( '#input2').val(),[/align]
[align=left] sex:$( '#input3').val(),[/align]
[align=left] job:$( '#input4').val()[/align]
[align=left] },[/align]
[align=left] function (data) //回传函数[/align]
[align=left] {[/align]
[align=left] var myjson='' ;[/align]
[align=left] eval( 'myjson=' + data + ';' );[/align]
[align=left] $( '#result').html("姓名:" + myjson.username + "<br/>工作:" + myjson[ 'job']);[/align]
[align=left] }[/align]
[align=left] );[/align]
[align=left] });[/align]
[align=left] [/align]
[align=left]//$.get()方式：[/align]
[align=left]$('#test_get').click( function ()[/align]
[align=left]{[/align]
[align=left] $.get([/align]
[align=left] 'DealData.aspx',[/align]
[align=left] {[/align]
[align=left] username:$( "#input1").val(),[/align]
[align=left] age:$( "#input2").val(),[/align]
[align=left] sex:$( "#input3").val(),[/align]
[align=left] job:$( "#input4").val()[/align]
[align=left] },[/align]
[align=left] function(data) //回传函数[/align]
[align=left] {[/align]
[align=left] var myjson='' ;[/align]
[align=left] eval( "myjson=" + data + ";" );[/align]
[align=left] $( "#result").html(myjson.job);[/align]
[align=left] }[/align]
[align=left] );[/align]
[align=left]});[/align]
[align=left]});[/align]
[align=left] [/align]
[align=left]function update_page (json) //回传函数实体，参数为XMLhttpRequest.responseText[/align]
[align=left]{[/align]
[align=left] var str= "姓名:"+json.username+"<br />" ;[/align]
[align=left] str+= "年龄:"+json.age+"<br />" ;[/align]
[align=left] str+= "性别:"+json.sex+"<br />" ;[/align]
[align=left] str+= "工作:"+json.job+"<br />" ;[/align]
[align=left] str+= "追加测试:" +json.append;[/align]
[align=left] $("#result").html(str);[/align]
[align=left]}[/align]
[align=left]</script>[/align]
[align=left] [/align]
[align=left]</head>[/align]
[align=left]<body>[/align]
[align=left]<div id="result" style="background :orange;border:1px solid red;width:300px;height :200px;"></div>[/align]
[align=left]<form id="formtest" action="" method="post">[/align]
[align=left] <p ><span> 输入姓名:</span ><input type="text" name="username" id="input1" /></p>[/align]
[align=left] <p ><span> 输入年龄:</span ><input type="text" name="age" id="input2" /></p>[/align]
[align=left] <p ><span> 输入性别:</span ><input type="text" name="sex" id="input3" /></p>[/align]
[align=left] <p ><span> 输入工作:</span ><input type="text" name="job" id="input4" /></p>[/align]
[align=left]</form>[/align]
[align=left]<button id="send_ajax">提交 </button>[/align]
[align=left]<button id="test_post">POST提交 </button>[/align]
[align=left]<button id="test_get">GET提交 </button>[/align]
[align=left]</body>[/align]
[align=left]</html>[/align]
[align=left] [/align]
[align=left] [/align]
[align=left] 后台方法处理[/align]
[align=left] public class Employee[/align]
[align=left] {[/align]
[align=left] public string username { get; set; }[/align]
[align=left] [/align]
[align=left] public string age { get; set; }[/align]
[align=left] [/align]
[align=left] public string sex { get; set; }[/align]
[align=left] [/align]
[align=left] public string job { get; set; }[/align]
[align=left] }[/align]
[align=left] [/align]
[align=left] protected void Page_Load(object sender, EventArgs e)[/align]
[align=left] {[/align]
[align=left] string usernameTemp = null ;[/align]
[align=left] string ageTemp = null ;[/align]
[align=left] string sexTemp = null ;[/align]
[align=left] string jobTemp = null ;[/align]
[align=left] if (Request.HttpMethod == "POST" )[/align]
[align=left] {[/align]
[align=left] usernameTemp = HttpContext.Current.Request.Form["username" ];[/align]
[align=left] ageTemp = HttpContext.Current.Request.Form["age" ];[/align]
[align=left] sexTemp = HttpContext.Current.Request.Form["sex" ];[/align]
[align=left] jobTemp = HttpContext.Current.Request.Form["job" ];[/align]
[align=left] }[/align]
[align=left] else[/align]
[align=left] {[/align]
[align=left] usernameTemp = HttpContext.Current.Request["username" ];[/align]
[align=left] ageTemp = HttpContext.Current.Request["age" ];[/align]
[align=left] sexTemp = HttpContext.Current.Request["sex" ];[/align]
[align=left] jobTemp = HttpContext.Current.Request["job" ];[/align]
[align=left] }[/align]
[align=left] Employee emp = new Employee();[/align]
[align=left] emp.username=usernameTemp;[/align]
[align=left] emp.age=ageTemp;[/align]
[align=left] emp.sex=sexTemp;[/align]
[align=left] emp.job=jobTemp;[/align]
[align=left] string strJSON = ToJson<Employee >(emp);[/align]
[align=left] string strInfor = "{\"age\":\"adfads\",\"job\":\"asdfas\",\"sex\":\"asdfas\",\"username\":\"safsd\"}" ;[/align]
[align=left] Employee em = Deserialize<Employee >(strInfor);[/align]
[align=left] Response.Write(strJSON); [/align]
[align=left] }[/align]
[align=left] [/align]
[align=left] [/align]
[align=left] private string ToJson<T>(T obj)[/align]
[align=left] {[/align]
[align=left] DataContractJsonSerializer ds = new DataContractJsonSerializer(typeof (T));[/align]
[align=left] MemoryStream ms = new MemoryStream();[/align]
[align=left] ds.WriteObject(ms, obj);[/align]
[align=left] string strJSON = Encoding .UTF8.GetString(ms.ToArray());[/align]
[align=left] ms.Close();[/align]
[align=left] return strJSON;[/align]
[align=left] }[/align]
[align=left] [/align]
[align=left] private T Deserialize<T>( string sJson) where T : class[/align]
[align=left] {[/align]
[align=left] DataContractJsonSerializer ds = new DataContractJsonSerializer(typeof (T));[/align]
[align=left] MemoryStream ms = new MemoryStream( Encoding.UTF8.GetBytes(sJson));[/align]
[align=left] T obj = (T)ds.ReadObject(ms);[/align]
[align=left] [/align]
[align=left] ms.Close();[/align]
[align=left] return obj;[/align]
[align=left] }[/align]
[align=left] [/align]
[align=left]附件例子：http://files.cnblogs.com/miaojia/WebAjax%E6%B5%8B%E8%AF%95.rar [/align]
一、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
获得字符串形式的响应数据。
[align=left] [/align]
[align=left]Ajax技术实例[/align]
[align=left] [/align]
[align=left]<html xmlns="http://www.w3.org/1999/xhtml">[/align]
[align=left]<head runat="server">[/align]
[align=left] <title ></title>[/align]
[align=left] <script src="jquery-1.7.1.min.js" type="text/javascript"></ script>[/align]
[align=left] <script language="javascript"> [/align]
[align=left]$(document).ready(function ()[/align]
[align=left]{[/align]
[align=left] $('#send_ajax').click( function (){[/align]
[align=left] var params=$('input' ).serialize(); //序列化表单的值[/align]
[align=left] $.ajax({[/align]
[align=left] url: 'DealData.aspx', //后台处理程序[/align]
[align=left] type: 'post', //数据发送方式[/align]
[align=left] dataType: 'json', //接受数据格式[/align]
[align=left] data:params, //要传递的数据[/align]
[align=left] success:update_page //回传函数(这里是函数名)[/align]
[align=left] });[/align]
[align=left] });[/align]
[align=left]//$.post()方式：[/align]
[align=left]$('#test_post').click( function (){[/align]
[align=left] $.post([/align]
[align=left] 'DealData.aspx',[/align]
[align=left] {[/align]
[align=left] username:$( '#input1').val(),[/align]
[align=left] age:$( '#input2').val(),[/align]
[align=left] sex:$( '#input3').val(),[/align]
[align=left] job:$( '#input4').val()[/align]
[align=left] },[/align]
[align=left] function (data) //回传函数[/align]
[align=left] {[/align]
[align=left] var myjson='' ;[/align]
[align=left] eval( 'myjson=' + data + ';' );[/align]
[align=left] $( '#result').html("姓名:" + myjson.username + "<br/>工作:" + myjson[ 'job']);[/align]
[align=left] }[/align]
[align=left] );[/align]
[align=left] });[/align]
[align=left] [/align]
[align=left]//$.get()方式：[/align]
[align=left]$('#test_get').click( function ()[/align]
[align=left]{[/align]
[align=left] $.get([/align]
[align=left] 'DealData.aspx',[/align]
[align=left] {[/align]
[align=left] username:$( "#input1").val(),[/align]
[align=left] age:$( "#input2").val(),[/align]
[align=left] sex:$( "#input3").val(),[/align]
[align=left] job:$( "#input4").val()[/align]
[align=left] },[/align]
[align=left] function(data) //回传函数[/align]
[align=left] {[/align]
[align=left] var myjson='' ;[/align]
[align=left] eval( "myjson=" + data + ";" );[/align]
[align=left] $( "#result").html(myjson.job);[/align]
[align=left] }[/align]
[align=left] );[/align]
[align=left]});[/align]
[align=left]});[/align]
[align=left] [/align]
[align=left]function update_page (json) //回传函数实体，参数为XMLhttpRequest.responseText[/align]
[align=left]{[/align]
[align=left] var str= "姓名:"+json.username+"<br />" ;[/align]
[align=left] str+= "年龄:"+json.age+"<br />" ;[/align]
[align=left] str+= "性别:"+json.sex+"<br />" ;[/align]
[align=left] str+= "工作:"+json.job+"<br />" ;[/align]
[align=left] str+= "追加测试:" +json.append;[/align]
[align=left] $("#result").html(str);[/align]
[align=left]}[/align]
[align=left]</script>[/align]
[align=left] [/align]
[align=left]</head>[/align]
[align=left]<body>[/align]
[align=left]<div id="result" style="background :orange;border:1px solid red;width:300px;height :200px;"></div>[/align]
[align=left]<form id="formtest" action="" method="post">[/align]
[align=left] <p ><span> 输入姓名:</span ><input type="text" name="username" id="input1" /></p>[/align]
[align=left] <p ><span> 输入年龄:</span ><input type="text" name="age" id="input2" /></p>[/align]
[align=left] <p ><span> 输入性别:</span ><input type="text" name="sex" id="input3" /></p>[/align]
[align=left] <p ><span> 输入工作:</span ><input type="text" name="job" id="input4" /></p>[/align]
[align=left]</form>[/align]
[align=left]<button id="send_ajax">提交 </button>[/align]
[align=left]<button id="test_post">POST提交 </button>[/align]
[align=left]<button id="test_get">GET提交 </button>[/align]
[align=left]</body>[/align]
[align=left]</html>[/align]
[align=left] [/align]
[align=left] [/align]
[align=left] 后台方法处理[/align]
[align=left] public class Employee[/align]
[align=left] {[/align]
[align=left] public string username { get; set; }[/align]
[align=left] [/align]
[align=left] public string age { get; set; }[/align]
[align=left] [/align]
[align=left] public string sex { get; set; }[/align]
[align=left] [/align]
[align=left] public string job { get; set; }[/align]
[align=left] }[/align]
[align=left] [/align]
[align=left] protected void Page_Load(object sender, EventArgs e)[/align]
[align=left] {[/align]
[align=left] string usernameTemp = null ;[/align]
[align=left] string ageTemp = null ;[/align]
[align=left] string sexTemp = null ;[/align]
[align=left] string jobTemp = null ;[/align]
[align=left] if (Request.HttpMethod == "POST" )[/align]
[align=left] {[/align]
[align=left] usernameTemp = HttpContext.Current.Request.Form["username" ];[/align]
[align=left] ageTemp = HttpContext.Current.Request.Form["age" ];[/align]
[align=left] sexTemp = HttpContext.Current.Request.Form["sex" ];[/align]
[align=left] jobTemp = HttpContext.Current.Request.Form["job" ];[/align]
[align=left] }[/align]
[align=left] else[/align]
[align=left] {[/align]
[align=left] usernameTemp = HttpContext.Current.Request["username" ];[/align]
[align=left] ageTemp = HttpContext.Current.Request["age" ];[/align]
[align=left] sexTemp = HttpContext.Current.Request["sex" ];[/align]
[align=left] jobTemp = HttpContext.Current.Request["job" ];[/align]
[align=left] }[/align]
[align=left] Employee emp = new Employee();[/align]
[align=left] emp.username=usernameTemp;[/align]
[align=left] emp.age=ageTemp;[/align]
[align=left] emp.sex=sexTemp;[/align]
[align=left] emp.job=jobTemp;[/align]
[align=left] string strJSON = ToJson<Employee >(emp);[/align]
[align=left] string strInfor = "{\"age\":\"adfads\",\"job\":\"asdfas\",\"sex\":\"asdfas\",\"username\":\"safsd\"}" ;[/align]
[align=left] Employee em = Deserialize<Employee >(strInfor);[/align]
[align=left] Response.Write(strJSON); [/align]
[align=left] }[/align]
[align=left] [/align]
[align=left] [/align]
[align=left] private string ToJson<T>(T obj)[/align]
[align=left] {[/align]
[align=left] DataContractJsonSerializer ds = new DataContractJsonSerializer(typeof (T));[/align]
[align=left] MemoryStream ms = new MemoryStream();[/align]
[align=left] ds.WriteObject(ms, obj);[/align]
[align=left] string strJSON = Encoding .UTF8.GetString(ms.ToArray());[/align]
[align=left] ms.Close();[/align]
[align=left] return strJSON;[/align]
[align=left] }[/align]
[align=left] [/align]
[align=left] private T Deserialize<T>( string sJson) where T : class[/align]
[align=left] {[/align]
[align=left] DataContractJsonSerializer ds = new DataContractJsonSerializer(typeof (T));[/align]
[align=left] MemoryStream ms = new MemoryStream( Encoding.UTF8.GetBytes(sJson));[/align]
[align=left] T obj = (T)ds.ReadObject(ms);[/align]
[align=left] [/align]
[align=left] ms.Close();[/align]
[align=left] return obj;[/align]
[align=left] }[/align]
[align=left] [/align]
[align=left]附件例子：http://files.cnblogs.com/miaojia/WebAjax%E6%B5%8B%E8%AF%95.rar [/align]
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ajax post get方式提交数据详解
- Get和Post区别,EncType提交数据的格式详解——转自他人博客的
- $.ajaxPOST提交数据变为GET
- 原始ajax通过xmlHttpRequest对象的send()方法提交数据--Get方式和Post方式
- Get和Post区别,EncType提交数据的格式详解
- AJax中get和post的数据提交功能
- [web] Get和Post区别,EncType提交数据的格式详解
- Jquery和 LigerUI 用Post\Get\Ajax调用数据前台实例！
- ajax 提交post get 数据，得到json结果解析
- 1.jQuery实例 2.jQuery load get post 数据提交方式 3.jquery ajax 应用 4.jquery小案例
- Get和Post区别,EncType提交数据的格式详解
- AJAX（get,post）提交数据
- 表单提交中Get和Post方式的区别及EncType表明提交数据的格式详解
- jQuery Ajax 实例详解 ($.ajax、$.post、$.get)
- C++] WAP GPRS 向WWW网站 提交POST GET 数据 实例
- vue axios数据请求get、post方法及实例详解
- JSP之表单提交get和post的区别详解及实例
- JS与Ajax Get和Post在使用上的区别实例详解
- asp.net Post Get提交数据转Model实例
- ajax 学习笔记之二 POST GET方式提交数据