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

<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. C#中string.Substring 的用法

    String.SubString(int  startIndex,int length)     startIndex:截取字符串开始的位置       length:截取字符串的长度 例子:用户 输 ...

  2. 获取所有input值 处理成json格式再利用$.post提交

    <script>$(document).ready(function(){        $("#sub").click(function(){        var ...

  3. lr_save_var() 截取任意字符串长度，以参数形式输出(参数转变量)

    Action() { char * desc=(char *)malloc(10);  //定义指针变量,以变量形式存放截取到的参数值 // char * aa = "jadkshfkasd ...

  4. SQL优化 总结 精简

    索引: 考虑在 where 及 order by 涉及的列上建立索引 经常同时存取多列,且每列都含有重复值可考虑建立组合索引,且查询越频繁的字段放前面 按需使用聚集与非聚集索引,聚集不适合频繁更新.适 ...

  5. 使用Session防止表单重复提交

    本文出处:http://www.cnblogs.com/xdp-gacl/p/3859416.html 在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用户可能会以 ...

  6. 《JavaScript高级程序设计》读书笔记 ---小结

    对象在JavaScript 中被称为引用类型的值,而且有一些内置的引用类型可以用来创建特定的对象,现简要总结如下: 引用类型与传统面向对象程序设计中的类相似,但实现不同: Object 是一个基础 ...

  7. Listview性能优化

    首先,虽然大家都知道,还是提一下,利用好 convertView 来重用 View,切忌每次 getView() 都新建.ListView 的核心原理就是重用 View.ListView 中有一个回收 ...

  8. js--事件对象的理解1

    在触发DOM上的某个事件时,会产生一个事件对象event.这个对象中包含着所有与事件有关的信息.包括导致事件的元素,事件的类型以及其他与特定事件相关的信息. 举例鼠标操作导致的事件对象中,会包含鼠标位 ...

  9. 【1】Chrome - 更换主题

    更换 Chrome 主题 参照:百度经验 如何在 Chrome 浏览器设置自己喜欢的皮肤,从而使得浏览器更具有个性和吸引力?下面就一步步教你实现(需要fan墙). 实现的效果如下: 第一步:启动Chr ...

  10. 【LeetCode】462. Minimum Moves to Equal Array Elements II

    Given a non-empty integer array, find the minimum number of moves required to make all array element ...