完整的 AJAX 写法(支持多浏览器)

代码如下:

<script type="text/javascript">

    var xmlhttp;
    function Submit() {

        //1.创建 XMLHttpRequest 对象
        if (window.XMLHttpRequest) {

            //IE7,IE8,FireFox,其它
            xmlhttp = new XMLHttpRequest();
            if (xmlhttp.overrideMimeType) {

                //针对某些特定版本的mozillar浏览器的BUG进行修正
                xmlhttp.overrideMimeType("text/xml");
            }

        } else if (window.ActiveXObject) {

            //IE6,IE5.5,IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

        }

    // 简单写法,应该也可以
    //xmlhttp = new XMLHttpRequest()|| new ActiveXObject("Microsoft.XMLHTTP");

        if (xmlhttp == undefined || xmlhttp == null) {
            alert(‘当前浏览器不支持创建XMLHttpRequest对象,请更换浏览器!‘);
            return;
        }

        //将每次的状态保存到 数组里
        array.push(xmlhttp.readyState);

        //2.注册回调方法 callback
        xmlhttp.onreadystatechange = callback;

        //获取客户端内容
        var userName = document.getElementById("UserName").value;

        /*
        //Get 请求方式
        //3.设置和服务端交互的相应参数
        xmlhttp.open("Get", "AjaxRequst.ashx?name="+userName, true);

        //4.设置向服务器发送数据,启动和服务端的交互
        xmlhttp.send();
        */

        //Post 请求方式
        //3.设置和服务端交互的相应参数
        xmlhttp.open("Post", "AjaxRequst.ashx", true);

        //Post方式需要增加的代码
        xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

        //4.设置向服务器发送数据,启动和服务端的交互
        xmlhttp.send("name="+userName);

    }

    function callback() {
        //5.判断和服务器端的交互是否完成,还要判断服务端的是否正确返回了数据
        if (xmlhttp.readyState == 4) {
            //表示和服务端的交互已经完成
            if (xmlhttp.status == 200) {
                //表示服务器的响应代码是200,正确的返回数据
                //纯文件数据的接受方法
                var message = xmlhttp.responseText;

                //将返回的内容添加到DIV层里
                var div = document.getElementById(‘message‘);
                div.innerHTML = message;

                //XML数据对应的DOM对象的接受方法
                //使用前提是,服务器端需要设置content-type为text/xml
                //var domXml = xmlhttp.responseXML;

            }
        }
    }

</script>
时间: 2024-07-30 13:48:23

完整的 AJAX 写法(支持多浏览器)的相关文章

比较完整的原始ajax写法

originalityAjax.html代码如下: Html代码   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>最原始的ajax写法</title> <meta http-equiv="keywords" content="keyword1,keyword2,key

Struts2对AJAX的支持

一.简介        struts2确实一个非常棒的MVC框架.这里部分记述一下struts2对AJAX的支持.实现AJAX有两种方式,一种是使用原生的javascript代码实现,一种是使用第三方的ajax框架(jquery,dwr,dojo等),jquery和dwr比较简单,做项目时也会经常用到.Struts2并没有发明新的AJAX框架,而是使用两个较为流行的框架,即Dojo框架和DWR框架. Dojo是一个用javascript语言实现的开源DHTML工具包,是一个客户端的AJaX框架,

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

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

MvcPager 概述 MvcPager 分页示例 — 标准Ajax分页 对SEO进行优化的ajax分页 (支持asp.net mvc)

该示例演示如何使用MvcPager最基本的Ajax分页模式. 使用AjaxHelper的Pager扩展方法来实现Ajax分页,使用Ajax分页模式时,必须至少指定MvcAjaxOptions的UpdateTargetId属性,该属性值即是分页后要通过Ajax来更新的 DOM 元素的 ID. Ajax.Pager()方法返回AjaxPager对象,您可以通过Ajax.Pager()方法的重载来传递PagerOptions和MvcAjaxOptions参数,也可以通过新的AjaxPager的Opti

IT兄弟连 JavaWeb教程 jQuery对AJAX的支持

jQuery对AJAX的支持 jQuery对Ajax请求的创建.发送.响应.注册数据处理函数.JSON的解析和缓存以及传参等都进行了相应的封装,同时也考虑了浏览器的兼容性问题. jQuery中对AJAX支持核心函数 jQuery中对Ajax支持的核心函数是$.ajax()函数,$.ajax()函数的代码结构如下: $.ajax({ url : 请求地址, type : 请求方式, async : 默认为true,表示异步请求,false表示同步请求, data : 请求参数, dataType

Kendo UI for jQuery使用教程:支持Web浏览器

[Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support for React和Kendo UI Support for Vue四个控件.Kendo UI for jQuery是创建现代Web应用程序的最完整UI库. Kendo UI小部件和框架组件旨在支持所有主要的Web浏览器,并提供跨浏览器兼容性.标准兼容性或支持触摸设备. 但是根据项目的具体情况,您

支持多种浏览器的纯css下拉菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312

AJAX异步提交,浏览器总跳出下载界面

问题: 我在写一个网页的“用户登录”部分时,要将用户名和密码传到后端验证,想在前端用了AJAX异步提交功能,将 用户名密码传到后端,然后后端返回验证结果.但AJAX写好后每次刷新网页都会跳出下载窗口,起初以为是 AJAX传输的数据格式出了问题,导致浏览器误以为后台传来的数据是下载内容(这么猜测的),于是 换了xml,txt,jaon 等格式试了个遍,最后还是没解决.后来翻到这篇帖子,才明白: http://www.jb51.net/article/32540.htm,我们先看看我的代码: 下面是

JavaScript之Ajax-6 Ajax的增强操作(jQuery对Ajax的支持、表单操作)

一.jQuery对Ajax的支持 load() - 作用: 将服务器返回的数据字节添加到符合要求的节点之上 - 用法: $obj.load(请求地址,请求参数) - 请求参数 - "username=tom&age=22" - {'username':'tom','age':22} - 有请求参数时,load方法发送POST请求,否则发送GET请求 get() - 作用: 发送GET类型的请求 - 用法: $.get(请求地址,请求参数,回调函数,服务器返回的数据类型) - 说