[Ajax]ajax入门

简介:

谈到ajax异步刷新技术,我之前感觉很高深,今天看了一下,大体上有一个了解,AJAX最大的应用就是我们要理解XMLHttpRequest这个对象。XMLHttpRequest可以提供不重新加载页面的情况下更新网页,在页面加载后在客户端向服务器请数 据, 在  页面加载后在服务器端接受数据,在后台向客户端发送数据。

关于ajax的详细叙述,可以参考这个博客:http://www.blogjava.net/tbwshc/archive/2012/07/24/383857.html

然后我贴出一些原始的ajax的例子,这样更方便了解ajax原理,解开他神奇的面纱,当然现在使用jQuery的ajax封装方法也非常方便。

例1:get请求

get.ashx:

<%@ WebHandler Language="C#" Class="_01_get" %>  using System; using System.Web;  public class _01_get : IHttpHandler {          public void ProcessRequest (HttpContext context) {         context.Response.ContentType = "text/plain";         //int m = 0;         //int n = 5 / m;                  //System.Threading.Thread.Sleep(3000);         context.Response.Write(DateTime.Now.ToString());     }       public bool IsReusable {         get {             return false;         }     }  }

get.htm:

<html xmlns="http://www.w3.org/1999/xhtml"> <head>     <title></title>     <script type="text/javascript">         //注意问题         //1 请求的路径中不要有中文         //2 注意大小写         //3 设置不读缓存         //4 区分readyState XMLHttpRequest的状态  和status http的状态码                  //1 创建对象         var xhr = createXHR();         function createXHR() {             var request;             if (XMLHttpRequest) {                 request = new XMLHttpRequest();                          } else {                 request = new ActiveXObject("Microsoft.XMLHTTP");             }             return request;         }         function btn_click() {                          document.getElementById("d").innerHTML = "正在加载...";                        //2 初始化                  xhr.open("get", "01-get.ashx?_="+ Math.random(), true);             //设置请求头 不读缓存             //xhr.setRequestHeader("If-Modified-Since", "0");                     //3 注册事件             xhr.onreadystatechange = function () {                 //判断接收服务器的响应完成后                 if (xhr.readyState == 4) {                     //判断服务器返回的状态码                      if (xhr.status == 200) {                         //获取服务器返回的响应                         //xhr.responseText                         //xhr.responseXML                         document.getElementById("d").innerHTML = xhr.responseText;                     } else {                         document.getElementById("d").innerHTML = "服务器内部错误";                     }                 }             }             //4 发送请求             xhr.send();         }              </script> </head> <body>     <input type="button" value="get"  />      <div id="d"></div> </body> </html> 

例2:post请求提交保单

post.ashx:

<%@ WebHandler Language="C#" Class="_02_post" %>  using System; using System.Web;  public class _02_post : IHttpHandler {          public void ProcessRequest (HttpContext context) {         context.Response.ContentType = "text/plain";          string name = context.Request.Form["n"];         string pwd = context.Request.Form["p"];         if (name == "admin" && pwd == "admin")         {             context.Response.Write(1);         }         else         {             context.Response.Write(0);         }     }       public bool IsReusable {         get {             return false;         }     }  }


post.htm:

<!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">         //1 创建对象         var xhr = createXHR();         function createXHR() {             var request;             if (XMLHttpRequest) {                 request = new XMLHttpRequest();             } else {                 request = new ActiveXObject("Microsoft.XMLHTTP");             }             return request;         }         function btn_click() {             var name = my$("txtName").value;             var pwd = my$("txtPwd").value;             var data = "n=" + name + "&p=" + pwd;                          //2             xhr.open("post", "02-post.ashx", true);             //!------------------!注意             xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");             //3             xhr.onreadystatechange = function () {                 if (xhr.readyState == 4) {                     if (xhr.status == 200) {                         var m = xhr.responseText;                         if (m == 1) {                             my$("msg").innerHTML = "登录成功";                         } else {                             my$("msg").innerHTML = "登录失败";                         }                     } else {                         my$("msg").innerHTML = "服务器内部错误";                     }                 }             }             //4             xhr.send(data);         }          function my$(id) {             return document.getElementById(id);         }     </script> </head> <body>     <input type="text" id="txtName" /><br />     <input type="text" id="txtPwd" /><br />     <input type="button" value="Login"  />     <span id="msg"></span> </body> </html> 

例3:省市选择效果

pro.ashx:

<%@ WebHandler Language="C#" Class="_06_pro" %>  using System; using System.Web; using System.Collections.Generic; using System.Text; public class _06_pro : IHttpHandler {          public void ProcessRequest (HttpContext context) {         context.Response.ContentType = "text/plain";         string s = context.Request.QueryString["pid"];         int pid;         if (int.TryParse(s, out pid))         {              //json形式的字符串             string json = GetDataByPId(pid);             context.Response.Write(json);         }         else             {             context.Response.Write("[]");         }     }     private string GetDataByPId(int pid)     {         List<Data> list = GetAllDatas();          List<Data> wantedList = new List<Data>();         foreach (Data data in list)         {             if (data.Pid == pid)             {                 wantedList.Add(data);             }         }                  //拼json形式的字符串             //[{ "Id": 1, "Name": "河北省", "PId": 0 },          //            { "Id": 2, "Name": "日本省", "PId": 0 },          //            { "Id": 3, "Name": "台湾省", "PId": 0 }          // ]         StringBuilder sb = new StringBuilder();         sb.Append("[");          foreach (Data data in wantedList)         {             sb.Append("{ \"Id\": "+data.Id+", \"Name\": \""+data.Name+"\", \"PId\": "+data.Pid+" },");         }         sb.Remove(sb.Length - 1, 1);         sb.Append("]");         return sb.ToString();     }          /// <summary>     /// 模拟从数据库中加载数据,返回泛型集合     /// </summary>     /// <returns></returns>     private List<Data> GetAllDatas()     {         List<Data> list = new List<Data>();          list.Add(new Data() { Id = 1, Name = "河北省", Pid = 0 });         list.Add(new Data() { Id = 2, Name = "台湾省", Pid = 0 });         list.Add(new Data() { Id = 3, Name = "日本省", Pid = 0 });           list.Add(new Data() { Id = 4, Name = "石家庄", Pid = 1 });         list.Add(new Data() { Id = 5, Name = "邯郸市", Pid = 1 });         list.Add(new Data() { Id = 6, Name = "邢台市", Pid = 1 });          list.Add(new Data() { Id = 7, Name = "高雄市", Pid = 2 });         list.Add(new Data() { Id = 8, Name = "台北", Pid = 2 });         list.Add(new Data() { Id = 9, Name = "台中", Pid = 2 });          list.Add(new Data() { Id = 10, Name = "东京", Pid = 3 });         list.Add(new Data() { Id = 11, Name = "冲绳", Pid = 3 });         list.Add(new Data() { Id = 12, Name = "大阪", Pid = 3 });         return list;     }     public bool IsReusable {         get {             return false;         }     }  }

pro.htm:

<html xmlns="http://www.w3.org/1999/xhtml"> <head>     <title></title>     <script src="ajax.js" type="text/javascript"></script>     <script type="text/javascript">         window.onload = function () {             loadProvince();                       }         function loadProvince() {             var province = my$("province");             //发送异步请求获取省的数据             ajax("get", "06-pro.ashx?pid=0", null, function (s) {                 //把字符串转化成对象                 var array = eval(s);                 for (var i = 0; i < array.length; i++) {                     var json = array[i];                     var option = document.createElement("option");                     option.innerHTML = json.Name;                     option.value = json.Id;                     province.appendChild(option);                 }                 //当省加载完,再加载市                 loadCity();              }, function () {                 alert("服务器内部错误");             });         }          function loadCity() {             var pid = my$("province").value;             var city = my$("city");             //清空下拉框             city.innerHTML = "";              ajax("get", "06-pro.ashx?pid=" + pid, null, function (s) {                 //把字符串转化成对象                 var array = eval(s);                 for (var i = 0; i < array.length; i++) {                     var json = array[i];                     var option = document.createElement("option");                     option.innerHTML = json.Name;                     option.value = json.Id;                     city.appendChild(option);                 }             }, function () {                 alert("服务器内部错误");             });         }      </script> </head> <body>     <select id="province" onchange="loadCity()">     </select>     <select id="city">     </select> </body> </html>

自己封装的ajax:

function my$(id) {     return document.getElementById(id); }  var xhr = createXHR(); function createXHR() {     var request;     if (XMLHttpRequest) {         request = new XMLHttpRequest();      } else {         request = new ActiveXObject("Microsoft.XMLHTTP");     }     return request; }  function ajax(method,url,data,fnSuccess,fnError) {      xhr.open(method, url, true);     if (method == "post") {         //!------------------!注意         xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");     }     xhr.onreadystatechange = function () {         if (xhr.readyState == 4) {                        if (xhr.status == 200) {                 var s = xhr.responseText;                 fnSuccess(s);             } else {                 fnError();             }         }     }     xhr.send(data); }

这里要感谢刘兄的指导,在此鸣谢!

==================== 迂者 丁小未 CSDN博客专栏=================

MyBlog:http://blog.csdn.net/dingxiaowei2013             MyQQ:1213250243

Unity QQ群:858550         cocos2dx QQ群:280818155

====================== 相互学习,共同进步 ===================

转载请注明出处:http://blog.csdn.net/dingxiaowei2013/article/details/17130553

欢迎关注我的微博:http://weibo.com/u/2590571922















本文转蓬莱仙羽51CTO博客,原文链接:http://blog.51cto.com/dingxiaowei/1366363,如需转载请自行联系原作者

相关文章
|
2月前
|
设计模式 前端开发 JavaScript
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
25 0
|
9月前
|
JSON 前端开发 JavaScript
前端AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(一)
前端AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(一)
546 0
|
2月前
|
XML JSON 前端开发
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
67 1
|
2月前
|
XML JSON 前端开发
Ajax – JSON入门指南
Ajax – JSON入门指南
23 1
|
2月前
|
设计模式 缓存 前端开发
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)(下)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
20 1
|
2月前
|
前端开发 JavaScript fastjson
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)(上)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
34 1
|
2月前
|
XML 前端开发 JavaScript
AJAX概念及入门案例
AJAX概念及入门案例
32 0
|
9月前
|
JSON JavaScript 前端开发
开心档-软件开发入门之​​Vue.js Ajax(vue-resource)
开心档-软件开发入门之​​Vue.js Ajax(vue-resource)
37 0
|
12月前
|
前端开发 JavaScript API
AJAX-day01-AJAX入门
AJAX-day01-AJAX入门
|
XML 前端开发 JavaScript
前端|AJAX入门
前端|AJAX入门
81 0