原生Ajax写法



//创建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;
        }
    }
}

 

 

 
时间: 2024-11-07 03:52:18

原生Ajax写法的相关文章

Ajax_原生ajax写法、理解异步请求、js单线程+事件队列、封装原生ajax

1.原生Ajax 一定要理解Ajax出现的背景 Ajax通过url查询后端接口的数据,在前端做数据的解析和局部更新 1.隐藏帧iframe方式实现页面局部更新---只是为了比较好的用户体验 访问后台接口数据显示在iframe页面中显示,没有做主页面的刷新,但页面实际上也刷新了  看左上角的转圈圈了 2.Ajax异步请求,真正实现页面局部刷新,没有跳转,坐上角小圈圈没转 原生Ajax写法---注意ajax的缩写 3.服务器放回了xml数据格式 解析过程还是很麻烦的,所以这种数据格式很少用了. 4.

原生ajax写法 (ajax状态值)

1.ie5 .6 使用ActiveX (window.ActiveXObject) 版本:  MSXML2.XmlHttp.6.0 MSXML2.XmlHttp.3.0 2.其他主流浏览器: 内置构造函数 (window.XMLHttpRequest) 创建适用于所有浏览器的对象 function createXmlHttpRequest()      {           if(window.XMLHttpRequest)           {                var oHt

原生ajax与封装的ajax使用方法

当我们不会写后端接口来测试ajax时,我们可以使用node环境来模拟一个后端接口. 1.模拟后端接口可参考http://www.cnblogs.com/heyujun-/p/6793900.html网站整站开发小例子,在打开命令窗口并转到所在项目文件夹下在命令行中输入npm install express --save,安装express中间件. 2.把当中的app.js的内容换成 var express=require('express'); //var path=require('path'

jQuery_review之 原生Ajax的写法

最低层的ajax的实现是基于浏览器的一个标准,就是XMLHttpRequest对象,这种对象在MS浏览器上面的实现与其他浏览器上面的实现是不一样的.尽管现在非常多的第三方框架采用"模板模式"封装了如何获取XMLHttpRequest对象以及如何发送和处理中间出现的异常,但是还是非常有必要对ajax进行一次复习,这样才能在看其他的方法的时候温故而知新的效果. 编写原生的ajax的代码,需要需要采用的步骤是,首先,我们应当在function中定义一个XMLHttpRequest的变量对象,

ASP.NET学习笔记(5)——原生Ajax基本操作

说明(2017-11-4 15:32:49): 1. 回北京后又快一个月了,上次在家写的下回预告,到底是没把加水印写完,而且这次也不想写.. 2. 上次许的愿,十月份看完asp.net,已经泡汤了,翻了一下,一共十天的课程,我搞不好大半年就看了6天的.. 3. 总而言之,这次的笔记是用JavaScript的原生ajax操作,应该只是了解写法吧,因为下一讲就是jQuery封装好的ajax操作了. Ajax_Get.aspx: 1 <%@ Page Language="C#" Aut

面试时怎样回答:你对原生ajax的理解

很多人跟我一样用习惯了jq封装好的$.ajax,但是面试时,原生ajax是很多面试官喜欢问的问题,今天再查资料,打算好好整理一下自己理解的原生ajax. 首先,jq的ajax:一般我常用的参数就是这些,不过可以配置的参数不止这些 $.ajax({ url:'',//请求文件路径 type:'',//请求方式GET POST data:{},//要发给服务器的数据参数 dataType:'',//希望接口返回的数据格式json,string等等 success:function(){ // 请求成

JS原生Ajax请求

摘录一个JS原生Ajax请求行为,原文地址:http://caibaojian.com/ajax-jsonp.html ajax({ url: "./TestXHR.aspx", //请求地址 type: "POST", //请求方式 data: { name: "super", age: 20 }, //请求参数 dataType: "json", success: function (response, xml) { //

原生ajax基础知识笔记

原生ajax基础知识笔记 1.创建 XMLHttpRequest 对象 所有现代浏览器(IE7+.Firefox.Chrome.Safari 以及 Opera)均内建 XMLHttpRequest 对象. 老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveXObject. 代码示例: // Creates a XMLHttpRequest object. var xhr = new XMLHttpRequest(); 兼容浏览器代码示例: var xhr; /

JavaScript的原生Ajax解析

通过JavaScript的Ajax进行详细的解析过程,从而更好的了解Jquery的Ajax. 顺带,我会在后面把我整理的一整套CSS3,PHP,MYSQL的开发的笔记打包放到百度云,有需要可以直接去百度云下载,这样以后你们开发就可以直接翻笔记不用百度搜那么麻烦了.  笔记链接:http://pan.baidu.com/s/1qYdQdKK 密码:pvj2   一.JavaScript原生ajax1.原生ajax代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16