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

<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. open("","r")与open("","rb")的效率区别

    fd = open("C:\Users\william\Desktop\dup_file - Copy (3).txt","r")for i in fd: pr ...

  2. AVAudioPlayer的锁屏播放控制和锁屏播放信息显示

    在设置这个锁屏之前,首先得设置应用支持后台音乐播放,TAGETS->Info->Required background modes->App plays audio or strea ...

  3. MySql表操作常用语法

    检查表CHECK TABLE table_name;修复表REPAIR TABLE table_name;优化表OPTIMIZE TABLE table_name;分析表ANALYZE TABLE t ...

  4. java中类与对象

    讨论下有关类的知识: 首先是java中累的定义 定义了一组大体上相似的对象. 一个类所包含的方法和数据描述一组对象的共同行为和属性. 对象则是类的具体化,是类的实例. 类通过派生可以有子类,同样也可以 ...

  5. 自动安装memcached服务端与PHP扩展Memcached

    该脚本基于阿里云服务器安装脚本,并只能运用于centos / aliyun os,该脚本使用时,需要与阿里云安装脚本的install.sh放在同一目录下.有缘人切忌乱用: #! /bin/bash # ...

  6. 未能正确加载“Microsoft.VisualStudio.Editor.Implementation.EditorPackage“提示信息

        在安装过vs2015之后出现未能正确加载“Microsoft.VisualStudio.Editor.Implementation.EditorPackage“提示信息在VS的安装目录下,找到 ...

  7. 1、IO输入&输出流 简介

    IO流的分类: * 流向: * 输入流 读取数据 * 输出流 写出数据 * 数据类型: * 字节流 * 字节输入流 读取数据 InputStream * 字节输出流 写出数据 OutputStream ...

  8. Apache Kafka开发入门指南(2)

    Apache Kafka目标是统一离线和在线处理,与Flume和Scribe相比较,Kafka在处理活动流数据方面更具优势.但是从架构的视野来看,Kafka与传统的消息系统(例如ActiveMQ或Ra ...

  9. Unity5系列资源管理AssetBundle——打包

    资源管理是游戏开发的重要环节,Unity中使用AssetBundle可以非常方便地帮我们打包和更新游戏内容,在5系列中,AssetBundle更是方便好用,现在让我们先进行打包吧. 刚说了,5系列打包 ...

  10. HDU 1509 Windows Message Queue(队列)

    题目链接 Problem Description Message queue is the basic fundamental of windows system. For each process, ...