当前位置：首页 -> AI编程基础 -> JAVA

[Ajax]ajax入门(一)

2014-11-24 08:14:28 · 作者: · 浏览: 4
标签: Ajax ajax 入门

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

然后我贴出一些原始的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: 

 
  <script type=text/java script> //注意问题 //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(); } 
  
 

   
 
 
 
 
 
 
例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:
 
 
 
 
 


 
  <script type=text/java script> //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); } 
 
 
 
 
 
 
 
 
 
 
 
 
 
例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
  
    list = GetAllDatas();

        List
   
     wantedList = new List
    
     (); foreach (Data data in list) { if (da