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

<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. Linux kernel Vhost-net 和 Virtio-net代码详解

    场景 Host上运行qemu kvm虚拟机,其中虚拟机的网卡类型为virtio-net,而Host上virtio-net backend使用vhost-net 数据包进入虚拟机代码分析 首先看vhos ...

  2. 转：Android应用性能测试

    Android用户也许会经常碰到以下的问题: 1)应用后台开着,手机很快没电了——应用耗电大 2)首次/非首次启动应用,进入应用特别慢——应用启动慢 3)应用使用过程中,越来越卡——CPU能力不足/内 ...

  3. nginx: [emerg] socket() [::]:80 failed (97: Address family not supported by protocol)

    环境:Centos6.5 行为:安装nginx 问题: nginx: [emerg] socket() [::]: failed (: Address family not supported by ...

  4. C#使用IHttpModule接口修改http输出的方法浅谈

    一.但你每次请求浏览一个页面,比如Login.aspx的时候,都会执行配置文件中system.webserver内的model这个节点的东西(这个是属于遍历的逻辑执行,会将model这个节点的东西全部 ...

  5. 【Apache KafKa系列之一】KafKa安装部署

    kafka是一种高吞吐量的分布式发布订阅消息系统,她有如下特性: 通过O(1)的磁盘数据结构提供消息的持久化,这种结构对于即使数以TB的消息存储也能够保持长时间的稳定性能. 高吞吐量:即使是非常普通的 ...

  6. Glusterfs[转]

    原文地址:http://support.huawei.com/ecommunity/bbs/10253434.html 1.      GlusterFS概述 GlusterFS是Scale-Out存 ...

  7. 有关Flash中与Java调用时候注意的一些事项

    1.构建本地拓展的ActionScript库时候要注意SWF文件的版本兼容性: 参考:http://help.adobe.com/zh_CN/air/extensions/WS99209310cacd ...

  8. web工程师经常遇到的专业术语(待补充)

    接口(API) SEO指的是将从各个方面对网站内容进行优化,方便搜索引擎检索.搜索引擎工作的原理就是对网站内容进行抓取,然后解析. 白帽SEO:合理的对网站内容进行优化进而增加搜索引擎友好度. 黑帽S ...

  9. gsl安装（Linux系统）

    1. 在gnu的ftp站点http://ftp.gnu.org/gnu/gsl/ 上, 下载最新的gsl-2.x.tar.gz 2. 解压下载好的gsl-2.x.tar.gz 压缩包,$tar -zx ...

  10. 使用Angular构建单页面应用(SPA)

    什么是SPA?看下图就是SPA: 下面说正经的,个人理解SPA就是整个应用只有一个页面,所有的交互都在一个页面完成,不需要在页面之间跳转. 单页面的好处是更快的响应速度,更流畅的用户体验,甚至和桌面应 ...