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

<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. mongodb （一）

    #mongodb安装(3.4.0) #下载安装包,解压 mkdir /data/mongodb cd /data/mongodb mkdir log conf data bin vim conf/mo ...

  2. Learning from the CakePHP source code - Part II

    原文:http://debuggable.com/posts/learning-from-the-cakephp-source-code-part-ii:480f4dd6-57fc-4715-8709 ...

  3. 没事抽空学——c语言指针操作基础概念

    指针基础 理解指针的最佳方法是画图,学习使用基本指针,不要产生空指针. 存储控件分配 存储控件分配是指在内存预留空间的过程.就像一个虚拟菜谱一样,指针对应菜名,其所指的内存空间中的数据对应实际的菜. ...

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

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

  5. chrome pyv8下载

    url: https://code.google.com/archive/p/pyv8/downloads linux命令: $sudo pip install -v pyv8

  6. c++ 定义宏常量

    #ifndef __GAME_DATA_H__ #define __GAME_DATA_H__ #ifndef GAME_IS_CREATE_SHOP #define GAME_IS_CREATE_S ...

  7. TortoiseGit 错误信息Aborting commit due to empty commit message.解决

    错误信息: Aborting commit due to empty commit message. git不能完全退出(退出码 1) (47 ms @ 2016/2/19 14:03:24) 解决办 ...

  8. PHP截取含中文的混合字符串长度的函数

    截取含中文的混合字符串长度 /** * 截取中文混合字符串指定长度 * * @param string $string * @param integer $length * @param string ...

  9. Android底部导航栏——FrameLayout + RadioGroup

    原创文章,转载请注明出处http://www.cnblogs.com/baipengzhan/p/6285881.html Android底部导航栏有多种实现方式,本文详细介绍FrameLayout ...

  10. hdu_5788_Level Up(树状数组+主席树)

    题目链接:hdu_5788_Level Up 题意: 有一棵树,n个节点,每个节点有个能力值A[i],mid[i],mid的值为第i节点的子树的中位数(包括本身),现在让你将其中的一个节点的A值改为1 ...