码迷,mamicode.com
首页 > Web开发 > 详细

原生Ajax写法

时间:2017-11-06 22:56:41      阅读:353      评论:0      收藏:0      [点我收藏+]

标签:function   发送请求   json   handler   null   orm   get   任务   com   


//创建XMLHttp对象
function CreateXmlHttp() {
    //非IE浏览器创建XmlHttpRequest对象
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else {
        return null;
    }
    //IE浏览器创建XmlHttpRequest对象
    if (window.ActiveXObject) {
        try {
            return new ActiveXObject("Microsoft.XMLHTTP"); //较老的IE版本创建
        } catch (e) {
            try {
                return new ActiveXObject("Msxml2.XMLHTTP"); //较新的IE版本创建
            } catch (ex) {
                return null;
            }
        }
    }
}
//调用Ajax
function Send() {
    var xmlHttp = CreateXmlHttp();
    if (!xmlHttp) {
        alert("创建xmlHttp对象异常");
        return false;
    }
    var url = "CommonHandler.ashx?t=" + Math.random();
    /*
    method:发送请求所使用的方法(GET或POST);与POST相比,GET更简单也更快,并且在大部分情况下都能用;然而,在以下情况中,请使用POST请求:
    •无法使用缓存文件(更新服务器上的文件或数据库)
    •向服务器发送大量数据(POST 没有数据量限制)
    •发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠 
     url:规定服务器端脚本的 URL(该文件可以是任何类型的文件,比如 .txt 和 .xml,或者服务器脚本文件,比如.aspx,.ashx 和 .php (在传回响应之前,能够在服务器上执行任务));
    async:规定应当对请求进行异步(true)或同步(false)处理;true是在等待服务器响应时执行其他脚本,当响应就绪后对响应进行处理;false是等待服务器响应再执行。
    */
    xmlHttp.open("post", url, true);
    //setRequestHeader():POST传数据时,用来添加 HTTP 头
    // 添加http头,发送信息至服务器时内容编码类型
    xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlHttp.send();
    //onreadystatechange 每次状态改变所触发事件的事件处理程序。
    xmlHttp.onreadystatechange = function () {
        //readyState 对象状态值
        /*0 (未初始化) 对象已建立,但是尚未初始化(尚未调用 open 方法)
        1 (初始化) 对象已建立,尚未调用 send 方法
        2 (发送数据) send 方法已调用,但是当前的状态及 http 头未知
        3 (数据传送中) 已接收部分数据,因为响应及 http 头不全,这时通过 responseBody 和 responseText
        获取部分数据会出现错误,
        4 (完成) 数据接收完毕,此时可以通过通过 responseXml 和 responseText 获取完整的回应数据*/
        if (xmlHttp.readyState == 4) {
            document.getElementById("msg").innerHTML = "数据正在加载中...";
            // status值说明  
            // 200:成功  
            // 404:没有发现文件、查询或URl  
            // 500:服务器产生内部错误                  
            if (xmlHttp.status == 200) {
                // 这里可以对返回的内容做处理  
                // 一般会返回JSON或XML数据格式  
                document.getElementById("msg").innerHTML = xmlHttp.responseText;
            }
        }
    }
}

//页面html
<body>
    <input type="button" id="btn" onclick="Send()" value="Send" />
    <br />
    <div id="msg">
    </div>
</body>

// 一般处理程序CommonHandler.ashx
<%@ WebHandler Language="C#" Class="CommonHandler" %>

using System;
using System.Web;

public class CommonHandler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        Random rd = new Random();
        context.Response.Write(rd.Next(0, 10000));
    }
    
    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

 


 

 

 

 

 

 

 

原生Ajax写法

标签:function   发送请求   json   handler   null   orm   get   任务   com   

原文地址:http://www.cnblogs.com/janfesh/p/7795322.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!