谈到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.responseXMLdocument.getElementById("d").innerHTML = xhr.responseText;} else {document.getElementById("d").innerHTML = "服务器内部错误";}}}//4 发送请求xhr.send();}</script>
</head>
<body><input type="button" value="get" οnclick="btn_click()" /><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;//2xhr.open("post", "02-post.ashx", true);//!------------------!注意xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//3xhr.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 = "服务器内部错误";}}}//4xhr.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" οnclick="btn_click()" /><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" οnchange="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

[Ajax]ajax入门相关推荐

php页面get方法实现ajax，入门实例教程
ajax,入门实例教程本例针对php页面,做了一个小的demo加深对ajax的理解 1.文档结构: 共有ajax.php 和action.php 2个页面. 2.源码如下: /*ajax.php页面 ...
Ajax程序设计入门
Ajax程序设计入门一.使用Ajax的主要原因 1.通过适当的Ajax应用达到更好的用户体验: 2.把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担, ...
【AJAX】入门AJAX
入门AJAX AJAX概述 AJAX的使用 XMLHttpRequest 创建XMLHttpRequest对象 XMLHttpRequest对象的常用方法 XMLHttpRequest对象的常用属性 ...
视频教程-Ajax从入门到进阶视频课程（通俗易懂）-JavaScript
Ajax从入门到进阶视频课程(通俗易懂) 南京大学软件工程硕士,全栈开发工程师,全栈讲师. 曾就职于中软国际.擎天科技.华为等公司,擅长Java开发.Web前端.Python爬虫.PHP等领域技术.从 ...
80篇各ajax框架入门教程
AJAX经典入门教程,入门实例,入门代码收藏. *VS2008 Ajax.NET快速入门教程* (2008-3-25) [本站原创]Ajax!?!入门教程之道 (2008-4-13) [本站原创]Aj ...
Javaweb（AJAX快速入门）
中哈喽丫各位本次讲jweb的(AJAX快速入门&&AJAX实现分页) 好了直接进入主题在进入主题前看看本次思维导图 ==========================jQuery之 ...
Ajax!从入门到入土
Ajax!从入门到入土 Ajax 1.JSON 1.1 什么是JSON 1.2 JSON语法 2.JSON的解析 2.1 Java中解析JSON 2.1.1 FastJSON解析 2.1.2 Jack ...
ajax地址为jsp,AJAX_在jsp中运用ajax(简单入门)，由于ajax为我们带来太多的好处 - phpStudy...
在jsp中运用ajax(简单入门) 由于ajax为我们带来太多的好处,所以在很多应用中我们都会优先选择这种技术,于是我也为之所吸引,现跟大家分享下一个简单的入门例子. regist.jsp文件:一个简 ...
sweet+alert+ajax,Ajax相关
Ajax Ajax的特性可以实现异步提交与局部刷新. Ajax是一门js的技术基于原生js开发的,但是用原生的js写代码过于繁琐, 我们在学的时候只学如何用jQuery实现ajax. AJAX 最 ...
html同时执行多个ajax,Ajax方法详解以及多个Ajax并发执行
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).javascript 先来一段代码html $.ajax({ type: &q ...

[Ajax]ajax入门

例1：get请求

例2：post请求提交保单

例3：省市选择效果

自己封装的ajax：

[Ajax]ajax入门相关推荐

最新文章

热门文章