首页 > 代码库 > JQuery AJAX介绍
JQuery AJAX介绍
new ActiveXObject("Microsoft.XMLHTTP")是IE中创建XMLHttpRequest对象的方法。
非IE浏览器中创建方法是new XmlHttpRequest()。
为了兼容不同的浏览器需要编写很多代码
回调函数中data参数为服务器返回的数据，textStatus为服务器返回状态码，textStatus为"success"表示成功。
JQuery中提供了简化ajax使用的方法。
$.ajax()函数是JQuery中提供的 ajax访问函数，$.post()是对$.ajax()的post方式提交ajax查询的封装,$.get()是对$.ajax()的get方式
提交ajax查询的封装。推荐用post方式，因为post方式没有缓存的问题，演示，get方式中缓存处理的处
理方法。todo：好像服务端异常404、500等回调方法并不会被调用。
如果有请求参数则在第二个参数用字典方式来设置
$.post("GetDate1.ashx", {"id":"2"},function(data, textStatus)
JQuery帮我们进行了URL编码，因此参数中有中文也不用担心。
案例1：JQuery AJAX版的汇率转换。注 status指的是通讯是否成功
function zhuanghuan() {
var amount = $("#count").val();
var type = $("#SelectType").val();
$.post("huilv.ashx",{"amount":amount,"type":type}, function(data, state) {
if (state == "success") {
$("#requst").val(data);
} else {
alert("ajax失败！");
}
});
}
其中 {"amount":amount,"type":type} 是代表参数,可不加,直接写在第一个参数里面
案例2：填入商品名称，AJAX 自动带出价格填充到价格框
1.先创建数据库T_Products表,字段(Id,Name,Price),生成强类型DataSet,增加个按Name查询数据的方法
SELECT Id, Name, Price FROM T_Products where Name=@name
2.创建HTML，增加两个文本框就行
产品名<input id="CPname" type="text" />
价格<input id="Price" type="text" />
3.创建处理程序页面 GetPrice.ashx
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string name = context.Request["name"]; //取得产品名
var data = http://www.mamicode.com/new T_ProductsTableAdapter().GetDataByName(name); //通过产品名查询"none"); //否则返回 none
}
}
3.创建Javascript脚本,使用JQury,使用AJAX
<script type="text/javascript">
$(function() { //页面一加载完毕后,就加载此函数
$("#CPname").blur(function() { //当#CPname控件失去焦点的时候
var Name = $("#CPname").val(); //获得用户输入的产品名
$.post("GetPrice.ashx", { "name": Name }, function(data, state) {
if (state == "success") { //如果状态成功
if (data != "none") {
$("#Price").val(data); //将返回的值(价格)写入到#Price控件中
}
else {
$("#Price").val("没有找到你要的东西！");
}
}
})
})
})
</script>
//------- 下面是用纯Javascript写的
<script type="text/javascript">
function price() {
var name = document.getElementById("CPname").value;
var Cname = encodeURI(name); //注意中文的转换,在JQury中不用,好像自动转换
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
if (!xmlhttp) {
alert("xmlhttp创建失败！");
return false;
}
xmlhttp.open("Post", "GetPrice.ashx?name=" + Cname);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
var val = xmlhttp.responseText;
if (val != "none") {
document.getElementById("Price").value = http://www.mamicode.com/xmlhttp.responseText;"Price").value = "http://www.mamicode.com/没有找到你要的东西";
return false;
}
}
}
}
xmlhttp.send();
}
如果是这样写的话，就需要在 CPname控件中加入 onblur() 失去焦点时的事件了如：
<input id="CPname" type="text" onblur="price()" />
案例3：用 Repeater 加载用户的评论,实现用户评论无刷新,动态网页
1.HTML设置
<ul id="ulComment">
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="odsPost">
<ItemTemplate>
<li>
IP：<%#Eval("IPAddr") %><br />
日期：<%#Eval("PostDate") %> <br />
内容：<%#Eval("msg") %><br/>
</li>
<hr color="red" />
</ItemTemplate>
</asp:Repeater>
</ul>
<textarea id="txtMsg" name="S1"></textarea><br />
<input id="btnPost" type="button" value="http://www.mamicode.com/评论" onclick="post()" />
2.处理程序页面 PostComment.ashx
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string msg = context.Request["msg"];
string ip = context.Request.UserHostAddress;
new T_PostsTableAdapter().Insert(ip, msg, DateTime.Now);
context.Response.Write("ok");
}
3.Javascript设置
<script type="text/javascript">
function post() {
var emsg = document.getElementById("txtMsg").value;
var msg = encodeURI(emsg);
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
if (!xmlhttp) {
alert("XMLHTTP创建失败");
}
xmlhttp.open("POST", "PostComment.ashx?msg=" + msg, false);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
if (xmlhttp.responseText == "ok") {
alert("发表成功！");
var newComment = "<li>日期：" + new Date().toLocaleTimeString() + "<br />
IP:自己<br />" + "内容:" + document.getElementById("txtMsg").value + "<br />
<hr color=‘pink‘ />";
document.getElementById("ulComment").innerHTML += newComment;
}
}
}
}
xmlhttp.send();
}
</script>
案例4：用静态页面 ul 加载用户的评论,静态网页
1.HTML设置
<ul id="ulComment">
2.处理程序页面设置 htmlPost.ashx
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
var comment = new T_PostsTableAdapter().GetData();
StringBuilder sb = new StringBuilder();
foreach (var items in comment)
{
sb.Append(items.IPAddr).Append("|").Append(items.PostDate).Append("|")
.Append(items.Msg).Append("$");
context.Response.Write(sb.ToString().Trim(‘$‘));
}
}
3. Javascript设置
<script type="text/javascript">
$(function() {
$.post("htmlPost.ashx", function(data, status) {
if (status != "success") {
alert("<li>加载失败！</li>");
return;
}
var lines = data.split("$");
for (var i = 0; i < lines.length; i++) {
var line = lines[i];
var file = line.split("|");
var comment = $("<li>IP:" + file[0] + "<br />日期:" + file[1] + "<br />
内容:" + file[2] + "</li><br /><hr color=‘red‘ />");
$("#ulComment").append(comment);
}
})
})
</script>
JQuery AJAX介绍