————————————————————

<script type="text/javascript">
            var client;                //定义XMLHttpRequest对象，也可以叫ajax客户端
            //button的click事件回调函数
            function sendAjax(){
                // 判断是否支持ActiveX控件,老版本的IE浏览器就需要使用ActiveXObject来创建
                if(window.ActiveXObject){
                    // 通过实例化ActiveXObject的一个新实例来创建XMLHTTPRequest对象
                    client = new ActiveXObject("Microsoft.XMLHTTP");
                }
                // 其他的大多数浏览器都支持本地javascript对象
                else if(window.XMLHttpRequest){
                    // 创建XMLHTTPRequest的一个实例（本地javascript对象）
                    client = new XMLHttpRequest();
                }else{
                    alert('创建ajax客户端失败，您的浏览器不支持该服务');
                }
                if(client){                //如果创建client成功以后
                    var method = document.getElementById("the_method").value;
                    var params = document.getElementById("params").value;
                    //这里的URL故意写一个错误的地址进行测试
                    //设置ajax打开以后，建立连接的方式和目标文件，以及是否为异步模式
                    if(method == 'POST'){
                        //用POST方法，参数可以通过send方法的参数写到请求的内容流中去
                        client.open(method,"test002.txt",true);
                        client.send(params);        //调用send函数，把参数写的请求内容中
                    }else if(method == 'GET'){
                        //用GET请求方法，参数就只能放在URL的后边，这种方式受到URL长度限制
                        client.open(method, "test002.txt?" + params,true);
                        client.send();
                    }
                    client.onreadystatechange = myCallBack;
                }
            }
            //自定义回调函数
            function myCallBack(){
                //如果请求的response正常返回
                if (client.readyState==4){
                    //在请求完成之后，隐藏请求进行中的提示
                    document.getElementById('loading').style.display = 'none';
                    if(client.status==200){//处理正常时的代码
                        var resp = client.responseText;    //返回的值的字符形式
                        var arr = eval('('+resp+')');    //使用eval得到json格式
                        var str = '学生信息：<br/>姓名, 年龄';//拼接字符
                        for(var i=0;i<arr.length;i++){    //遍历返回的学生数据数组
                            //把每一个学生的姓名和年龄拼接起来
                            str += '<br/>' + arr[i]['name'] + ',' + arr[i]['age'];
                        }
                        //把拼接好的信息放到content内容中，以显示在网页上    
                        document.getElementById('content').innerHTML = str;
                    }else if(client.status==404){//处理URL不存在的情况
                        alert('网页不存在');
                    }else if(client.status==500){//处理服务器内部错误的情况
                        alert('服务器内部错误');
                    }
                }else{
                    //在请求完成之前，显示请求进行中的提示
                    document.getElementById('loading').style.display = 'block';
                }
            }
</script>———————————————————————————————

<style>
            /*loading的样式*/
            #loading{
                border:1px solid black;
                background-color:yellow;
                display:none;
                height:25px;
                width:100px;
                margin:5px auto;
            }
</style>

——————————————————————————————

<body style="text-align:center">    
        <label>请求方法：</label>
        <select id="the_method">
            <option value="GET">GET</option>
            <option value="POST">POST</option>
        </select>
        <br/>
        <label>请求内容：</label>
        <input type="text" id="params" name="params"/>
        <br/>
        <input type="button" value="Send" onclick="sendAjax();"/>
        <br/>
        <span id="loading">Loading....</span>
        <br/>
        <p id="content"></p>
    </body>

——————————————————————————————

Ajax应用-Ajax传输JSON数据实例的更多相关文章

  1. 通过ajax和spring 后台传输json数据

    在通过ajax从页面向后台传数据的时候,总是返回415(Unsupported media type)错误,后台无法获取数据.如下图所示: 在尝试解决这个问题的时候,我们首先要理解一下概念: @req ...

  2. Django之AJAX传输JSON数据

    目录 Django之AJAX传输JSON数据 AJAX 中 JSON 数据传输: django响应JSON类型数据: django 响应 JSON 类型数据: Django之AJAX传输JSON数据 ...

  3. 11月13日上午ajax返回数据类型为JSON数据的处理

    ajax返回数据类型为JSON数据的处理 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...

  4. SpringMVC中出现" 400 Bad Request "错误（用@ResponseBody处理ajax传过来的json数据转成bean）的解决方法

    最近angularjs post到后台 400一头雾水 没有任何错误. 最后发现好文,感谢作者 SpringMVC中出现" 400 Bad Request "错误(用@Respon ...

  5. 8.ajax与django后台json数据的交互

    1新建django项目名为json_ajax,应用名为app,在templates模板中新建ajax.html文件 ajax.html <!DOCTYPE html> <html l ...

  6. 【Spring学习笔记-MVC-5】利用spring MVC框架，实现ajax异步请求以及json数据的返回

    作者:ssslinppp      时间:2015年5月26日 15:32:51 1. 摘要 本文讲解如何利用spring MVC框架,实现ajax异步请求以及json数据的返回. Spring MV ...

  7. AJAX跨域请求json数据的实现方法

    这篇文章介绍了AJAX跨域请求json数据的实现方法,有需要的朋友可以参考一下 我们都知道,AJAX的一大限制是不允许跨域请求. 不过通过使用JSONP来实现.JSONP是一种通过脚本标记注入的方式, ...

  8. 类型：JQuery；问题：ajax调用ashx文件；结果：ashx文件怎么获取$.ajax()方法发送的json数据

    ashx文件怎么获取$.ajax()方法发送的json数据 作者:careful 和ajax相关     新浪微博QQ空间QQ微博百度搜藏腾讯朋友QQ收藏百度空间人人网开心网0 $.ajax({  t ...

  9. Java后台使用httpclient入门HttpPost请求（form表单提交，File文件上传和传输Json数据）

    一.HttpClient 简介 HttpClient 是 Apache Jakarta Common 下的子项目,用来提供高效的.最新的.功能丰富的支持 HTTP 协议的客户端编程工具包,并且它支持 ...

随机推荐

  1. 2px边框，4分之1内边框实现选中功能实现

    有时候我们要实现如下选中效果: 我给出一种解决办法: 首先选中的时候,加一个class(active),未选中的全部加一个class(inactive),外层给一个1px border,每个选项给一个 ...

  2. 返回变量的类型VarType函数

    'vbEmpty 0 Empty(未初始化)'vbNull 1 Null(无有效数据)'vbInteger 2 整数'vbLong 3 长整数'vbSingle 4 单精度浮点数'vbDouble 5 ...

  3. python学习之glob模块

    如何批量获取文件路径 import glob import os def image_proc(): for files in glob.glob('/home/xxx/filename/*.png' ...

  4. Eclipse 打开当前文件所在的文件夹

    两种方法: 1.安装EasyExplorer插件,有了这个插件就可以很方便地打开资源文件所在的文件夹了. EasyExplorer 从 http://sourceforge.net/projects/ ...

  5. javascript中的面向对象—— 学习1

    面向对象:Object Oriented(OO) 一切事物皆对象,通过面向对象的方式,将显示世界的事物抽象成对象,将显示世界中的关系抽象成类.继承,帮助人们实现对显示世界的抽象与数字建模:--百科 一 ...

  6. MySQL-Front 出现“程序注册时间到期 程序将被限制模式下运行”解决方式

    MySQL-Front 出现“程序注册时间到期 程序将被限制模式下运行”解决方式 在用mysql-front的时候遇到显示:程序注册时间到期程序将被限制模式下运行.可以在“帮助”菜单下的点“登记”-- ...

  7. event 实现观察者模式

    看了一些其他人写的,一下就晕了,还是自己写一个给自己看吧. 用event语法糖实现的观察者,与普通的实现,最大的区别在于,Subject的操作中不会直接触发Observer的Update,而是通过ev ...

  8. ubuntu 搭建python2.x 抓取环境

    1.apt-get install python-bs4 bs4只有py2的代码,安装在py3下会很麻烦 bs4支持HTML parser,也可以支持第三方的分析器 2.apt-get install ...

  9. HDU 1532 Drainage Ditches

    网络最大流模版题,用了(Ford-Fulkerson算法)  代码不贴了,模版见我博客 http://www.cnblogs.com/zufezzt/p/4585752.html  

  10. java--方法重写与重载

    方法重写 /*方法重写(一般多用在继承上) 定义:它是指子类和父类的关系,子类重写了父类的方法. 两个方法返回值.方法名.参数列表必须完全一致! 出现原因:在Java中,子类可继承父类中的方法,而不需 ...