Ajax + Json 基本用法（自整理）

最新推荐文章于 2024-08-15 15:27:27 发布

weixin_34029949

最新推荐文章于 2024-08-15 15:27:27 发布

阅读量102

点赞数

文章标签： json java javascript ViewUI

原文链接：https://my.oschina.net/Shilu/blog/743041

版权

为什么80%的码农都做不了架构师？>>>

Asynchronous javaScipt and Xml
什么是Ajax：异步访问服务器,不刷新页面！不是一项新技术,整合了几项技术组成.主要目的是为了提高用户体验度
执行流程：在用户界面触发事件调用javaScipt,通过引擎(XMLHttpRequest)对象异步发送请求到服务器，服务器返回XML,JSON,或HTML等格式的数据,然后利用返回一的数据使用DOM和CSS技术局部刷新用户界面。
作用：通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

readyState 状态：0.未初始化1.开始发送请求2.请求发送完成3.开始读取响应4.读取响应结束
Status 状态：200-正确返回,404-找不到访问对象,403-没有访问权限,500-数据错误
onreadystatechange：设置回调函数

1.进行Ajax原生操作
   1.创建XMLHttpRequest对象
   2.设置回调函数
   3.初始化XMLHttpRequest组件
   4.发送请求
   5.参考(validate_Email.jsp,practice_server.jsp)文件

使用JQuery实现Ajax方法(必须导入jquery-1.8.3.js)文件才能使用！
2.$.ajax()方法:{}方法中基本参数有6个分别是：每个参数以：“参数名：参数值”的方法书写
   $.ajax({
       url:要提交的路径
       type:发送的请求方法(Get/Post)
       data:要发送的到服务器的数据
       dateType:指定要传输的数据格式 (xml,html,script,json,text,jsonp)
       success:function(result){ ：请求成功之后要执行的代码(result,ts)
           ..省略
       },
       error:function(){ :请求失败之后要执行的代码(xhr,em,e)
           alert("系统升级完善中,求稍后再尝试..");
       }
   });
注意： success:function(result,status){ 参数1：有服务器中返回的数据。参数2：请求类型的字符串
            error:function(xhr,msg,etype){ 参数1：XMLHttpRequest对象。参数2:错误信息。参数3:捕获的异常对象。
   参考(validate_Email_JQuery.jsp,VaildateEmailServlet)文件

除了$.ajax()方法还有：以PSOT/GET请求发送Ajax
               $.get{url,data,success(resp,status,xhr),dataType};
               $.post{url,data,success(resp,status,xhr),dataType};
               将页面片段载入到selector(选择器)所表达的容器中
               $.load{url,data,success(resp,status,xhr)};
               有待验证用法..
               加载JSON格式数据或脚本
               $.getJSON(url,[data],[callback])
               $.getScript(url,[callback])

什么是JSON：轻量级的数据交换格式,能够替代XML的工作.
保存文件的格式可以为：js,json(jsondemo.js或者test.json)
优点是：数据格式比较简单, 易于读写, 格式都是压缩的, 占用带宽小
语法/书写格式是：名称/值对。多个值之间使用逗号分隔：var JSON对象 = {key:value,key:value··};
       value可以是：String,Number,boolean,null,对象,数组,等等类型
   1.数据在键值对中,中间用冒号隔开:
   2.数据由逗号分隔,
   3.花括号保存对象{}
   4.方括号保存数组[]
注意：数组：var JSON对象 = [value,value,··];
用法：1.jsondemo.js 编写Js文件   {"key":"value"}
   2.在页面输出
   参考：(jsondemo.js,json.jsp)文件

   发送JSON格式数据到服务端,或者接收从服务器端返回的JSON格式数据。
   必须使用$getJSON()方法异步发送请求到服务端，并以JSON格式封装客户端与服务端间传递的数据。
   语法：$getJSON(url,data,success(result,status,xhr))
   等价于：使用$Ajax({参数中,指定类型：dataType:"JSON"})就是两个方法一样的功效
   注意：使用该方法时，默认从服务器接收到数据就是JSON对象，不需要再解析即可使用

读取文件 test.json 读取时指定绝对路径
   $getJSON使用方式：$.getJSON("jqueryjs/test.json",function(data){
                  var dataValue = data.key;
               }

解析字符串的方法： $.parseJSON(str)
   用法：var Str = {"name":"林林林"};
   alert($.parseJSON(Str).name);结果输出:弹框信息：林林林


使用Ajax+JSON+struts.xml+Action访问数据
使用JSON插件实现JSON类型的Result,实现JSON作为服务器和客户端之间的传递数据
   1.先导入包：struts2-json-plugin-2.3.15.1.jar
   2.在struts.xml文件中编写<package>,并指定该包继承于json-default
   3.在<package>下定义<action>,并将结果标签指定属性为：<result type = "json"></result>
例子：struts.xml文件中
   <package name="ajax" extends="json-default" namespace="/">
               
       <action name="loginUsersAjax" class="cn.struts2.action.LoginUsersAjaxAction" method="login">
           

           
           <result name="success" type="json">

               
               <param name="includeProperties">users,nextAction</param>

               
               
               
               
               
               
           </result>
       </action>
   </package>
jsp页面：必须保证能正常使用JQuery！(导包)
<script type="text/javascript">
   function validate() {
       var name = $("#name").val();
       var pwd = $("#pwd").val();
       /* alert(name);alert(pwd); */
       if (name == null || name == "") {
           $("#errorMsg").html("<span style='color:red'>请输入用户名!</span>");
       }
       $.ajax({
           url : "loginUsersAjax", // 访问struts.xml
           type : "post",
           data : {
               "users.name" : name,
               "users.password" : pwd
           },
           dataType : "json",
           success : function(data) {
               $("#errorMsg").html("");
               alert(data.nextAction);
               if (data != null && data.users!=null) {
                   location.href = data.nextAction;
               } else {
                   $("#errorMsg").html("<span style='color:red'>输入用户名或者密码不正确！</span>");
               }
           },
           error : function(xhr, msg, etype) {
               alert("异常类型1：" + etype + ",异常信息：" + msg);
           }
       });

   };
</script>

使用正则表达式验证方法为：正则表达式.test(获取的值)
           列子： var email = $("#email").val();
           var testEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
           if(testEmail.test(email)){return"是邮箱"}else{return"不是邮箱"}

转载于:https://my.oschina.net/Shilu/blog/743041