ajax与json

最新推荐文章于 2022-05-11 19:22:50 发布

笑谈子云亭

最新推荐文章于 2022-05-11 19:22:50 发布

阅读量302

点赞数 2

分类专栏： PC端web页面开发文章标签： ajax json javascript

本文链接：https://blog.csdn.net/lj15559275886/article/details/120121394

版权

PC端web页面开发专栏收录该内容

7 篇文章 2 订阅

订阅专栏

一、Ajax技术和原理

1.1、简介

AJAX=Asynchronous Javascript and Xml (异步的javascript和xml)
Ajax不是一种新的编程语言，而是一种使用现有标准的新方法。
Ajax与服务器交换数据并更新部分网页的艺术，在于不重新加载整个页面。

1.2、包含的技术

使用CSS和XHTML来显示
使用DOM模型来交互和动态显示
使用XMLHttpRequest来和服务器进行异步通信
使用javascript来绑定和调用

Ajax的核心是XMLHttpRequest对象
不同的浏览器创建XMLHttpRequest对象的方法是有差异的。
IE浏览器使用ActiveXObject，而其他浏览器使用XMLHttpRequest的内置对象。

1.3、Ajax的工作原理

Ajax的工作原理相当于在用户和服务器之间加了一个中间层（Ajax引擎），使用户操作和服务器响应异步化。并不是所有的用户请求都提交给服务器。像一些数据验证和处理都交给Ajax引擎自己来做，只有确定从服务器读取新数据时再有Ajax代为向服务器提交请求。

在这里插入图片描述

交互方式对比：
在这里插入图片描述

使用Ajax的优势：
1、减少了从服务器的下载量。
2、消除用户每次输入时的页面刷新。
在这里插入图片描述

1.4、XMLHttpRequest常用属性

1.4.1、onreadystatechange

存储服务器响应的函数。
xmlHttp.onreadystatechange=function(){
//处理代码逻辑
}

1.4.2、readyState

存储服务器响应的状态信息。
每当readyState改变时，onreadystatechange的函数就会被执行。readyState的值：

状态	描述
0	请求未初始化（在调用open()之前）
1	请求已提出（在调用send()之前）
2	请求已发送（通常可以从响应得到内容头部）
3	请求处理中（响应中通常有部分数据可用，但服务器还没有完成响应）
4	请求已完成（可以访问服务器响应并使用它）

xmlHttp.onreadystatechange=function(){
    if(xmlHttp.readyState==4){
        //获取服务器response内容
    }
}

1.4.3、responseText

取回又服务器返回的数据。

xmlHttp.onreadystatechange=function(){
    if(xmlHttp.readyState==4){
        document.myForm.time.value=xmlHttp.responseText;
    }
}

其他属性
在这里插入图片描述

1.5、XMLHttpRequest的常用方法

1.5.1、open()

open有三个参数，第一个参数定义发送请求使用的方法，第二个参数规定服务端脚本URL，第三个参数规定是否对请求进行异步处理。

xmlHttp.open("GET","test.php",true);

1.5.2、send()

send()方法将请求送往服务器。

xmlHttp.send(null);

其他方法
在这里插入图片描述

二、Ajax编程步骤

ajax使用流程：

创建XMLHttpRequest对象
设置请求方式
调用回调函数
发送请求

2.1、创建XMLHttpRequest对象

//第一步：创建XMLHttpRequest对象

var xmlHttp;
if(window.XMLHttpRequest){
    //非IE
    xmlHttp=new XMLHttpRequest();
}else if(window.ActiveXObject){
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}

2.2、设置请求方式

在web开发中，请求方式有两种，get和post。使用XMLHttpRequest对象的open()方法来设置。

名称	功能	参数
open()	规定请求类型、URL以及是否异步处理请求	参数1：设置请求类型，POST或者GET；参数2：服务器上接口请求地址；参数3：是否异步，是为true，否为false

//第二步，设置和服务器端交互的相应方式

var url="http://localhost:8080/JSLearning/getAjax";
xmlHttp.open("POST",url,true);

GET/POST:
get更简单更快，大多数情况下都能使用。然而上传文件或者大数据时请使用post请求。
同步/异步：
很多服务器在处理请求时相当费时，ajax出现前可能会引起程序挂起或者停止。而使用ajax可以在等待服务器响应同时继续执行其他脚本，当响应就绪后对响应进行处理。

2.3、调用回调函数

如果ajax使用异步传输，就需要回调函数来处理服务器响应。XMLHttpRequest对象有一个onreadystatechange属性，回调函数传递给该属性：xmlHttp.onreadystatechange=function(){}
所谓回调函数就是，请求在后台处理完，再返回前台所实现的功能。
//第三步，注册回调函数

xmlHttp.onreadystatechange=function(){
    if(xmlHttp.readyState==4){
        if(xmlHttp.status==200){
            var obj=document.getElementById(id);
            obj.innerHtml=xmlHttp.responseText;
        }else{
            alert("ajax服务器返回错误!");
        }
    }
}

上述代码中：
xmlHttp.readyState存有XMLHttpRequest状态（0：请求初始化；1：服务器连接已建立；2：请求已接收；3：请求处理中；4：请求已完成）
xmlHttp.status是服务器返回的结果（200：正确；404：未找到页面）
xmlHttp有两个属性用来获取后台返回数据：responseText和responseXML,前者获取字符串形式响应，后者获取XML形式响应。使用哪一种由后台返回数据决定。

2.4、发送请求

//第四步，设置请求参数，发送请求

var uname=document.getElementsByName("userName")[0].value;
var upass=document.getElementsByName("userPass")[0].value;
var params="userName="+uname+"&userPass="+upass+"&time="+Math.random();
//增加time随机数，防止读取缓存
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=UTF-8");
//向请求添加请求头，如果post请求有数据一定要加！！！
xmlHttp.send(params);

如果想像HTTP表单那样POST数据，请使用setResquestHeader()添加请求头。

2.5、AJAX状态码说明

1：请求收到，继续处理
2：操作成功收到，分析、接受
3：完成此请求必须进⼀步处理
4：请求包含⼀个错误语法或不能完成
5：服务器执⾏⼀个完全有效请求失败
再具体就如下：
100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本
200——交易成功
201——提示知道新⽂件的URL
202——接受和处理、但处理未完成
203——返回信息不确定或不完整
204——请求收到，但返回信息为空
205——服务器完成了请求，⽤户代理必须复位当前已经浏览过的⽂件
206——服务器已经完成了部分⽤户的GET请求
300——请求的资源可在多处得到
301——删除请求数据
302——在其他地址发现了请求数据
303——建议客户访问其他URL或访问⽅式
304——客户端已经执⾏了GET，但⽂件未变化
305——请求的资源必须从服务器指定的地址得到
306——前⼀版本HTTP中使⽤的代码，现⾏版本中不再使⽤
307——申明请求的资源临时性删除
400——错误请求，如语法错误
401——请求授权失败
402——保留有效ChargeTo头响应
403——请求不允许
404——没有发现⽂件、查询或URl
405——⽤户在Request-Line字段定义的⽅法不允许
406——根据⽤户发送的Accept拖，请求资源不可访问
407——类似401，⽤户必须⾸先在代理服务器上得到授权
408——客户端没有在⽤户指定的饿时间内完成请求
409——对当前资源状态，请求不能完成
410——服务器上不再有此资源且⽆进⼀步的参考地址411——服务器拒绝⽤户定义的Content-Length属性请求
412——⼀个或多个请求头字段在当前请求中错误
413——请求的资源⼤于服务器允许的⼤⼩
414——请求的资源URL⻓于服务器允许的⻓度
415——请求资源不⽀持请求项⽬格式
416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If
Range请求头字段
417——服务器不满⾜请求Expect头字段指定的期望值，如果是代理服务器，可能是下⼀级服务器不能
满⾜请求
500——服务器产⽣内部错误
501——服务器不⽀持请求的函数
502——服务器暂时不可⽤，有时是为了防⽌发⽣系统过载
503——服务器过载或暂停维修
504——关⼝过载，服务器使⽤另⼀个关⼝或服务来响应⽤户，等待时间设定值较⻓
505——服务器不⽀持或拒绝⽀请求头中指定的HTTP版本

三、Jquery的ajax操作

3.1、传统方式实现ajax的不足

步骤繁琐
方法、属性、常用值太多不好记忆

3.2、Ajax()方法

可以通过发送http请求获取远程数据，是Jquery最底层的ajax实现，具有较高灵活性。
$. a j a x ([s e t t i n g s]); / / 参数 s e t t i n g s 是$ .ajax()方法的参数列表，用于配置ajax请求的键值对集合。

$.ajax({
     url:请求地址,
     type:"get|post|put|delete", //默认为get
     data:{"id":"123","pwd":"123456"}, //请求参数
     dataType:"html|text|json|xml|script|jsonp",//请求参数类型
     success:function(data,dataTextStatus,jqxhr){},//请求成功回调
     error:function(jqxhr,textStatus,error){}  //请求失败回调
});

3.3、get()方法

$.get(url,data,function(result){

});

参数说明：
url：请求的路径
data：发送的数据
success：成功回调函数
result：返回的数据

3.4、post()方法

$.post(url,data,function(result){

});

参数说明：
url：请求的路径
data：发送的数据
success：成功回调函数
result：返回的数据

四、JSON

4.1、json的概念

JSON(javascript object notation)一种轻量级数据交换格式。易于阅读编写，解析生成。它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition -December 1999的⼀个⼦集。
JSON采用完全独立于语言的文本格式，但也使用了类似于C语言家族的习惯。

4.2、JSON对象的定义与使用

定义格式：

var 变量名={
    "key1":value,            //Number
    "key2":"value",           //字符串
    "key3":[],               //数组
    "key4":{},                //json对象
    "key5":[{},{}]           //json数组
};

使用：【对象名.属性名】

<script type="text/javascript">
    //json定义
    var jsons={
        "key1":123,            //Number
        "key2":"234",           //字符串
        "key3":[123,"234"],               //数组
        "key4":{"key4_1":123,"key4_2":"234"},                //json对象
        "key5":[{"key5_1_1":123,"key5_1_2":"234"},
        {"key5_2_1":123,"key5_2_2":"234"}]           //json数组
    }
    //访问json属性
    alert(jsons.key1);
    alert(jsons.key2);
    alert(jsons.key3[1]);
    alert(jsons.key4.key4_1);
    alert(jsons.key5[0].key5_1_1);
</script>

4.3、JSON在JAVA中的使用

json和java对象的转换需要使用第三方包：
在这里插入图片描述

1、单个对象或者map集合
java->json

Users user2=new Users();
user2.setUserName("张三");
user2.setPassword("123");
user2.setAge(20);
JSONObject obj=JSONObject.fromObject(user2);

json->java

String str="{'userName':'李四','password':'admin','age':20}"
JSONObject json=JSONObject.fromObject(str);
Users user=(Users)JSONObject.toBean(json,Users.class);

2、对象集合和json的转换
java集合->json数组

List list=new ArrayList();
list.add("aa");
list.add("bb");
JSONArray obj=JSONArray.fromObject(list);//set转换一样

json数组->java集合（1）

String str="[{'age':20,'password':'abc','userName':'李四'},
{'age':19,'password':'aaa','userName':'张三'}]";
JSONArray json=JSONArray.fromObject(str);
Object[] objs=(Object[])JSONArray.toArray(json,Users.class);

json数组->java集合（2）

String str="[{'age':20,'password':'abc','userName':'李四'},
{'age':19,'password':'aaa','userName':'张三'}]";
JSONArray json=JSONArray.fromObject(str);
List<Users> list=(List<Users>)JSONArray.toCollection(json,Users.class);

3、实例

<html>
<head>
    <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
    <script>
        $(function () {
            $("input[name='uId']").blur(function () {
                var uId = $(this).val();
                $.ajax({
                    url: "getUser",
                    data: "userId=" + uId,
                    type: "post",
                    dataType: "json",//服务器响应数据格式
                    success: function (rs) {
                        $("input[name='uName']").val(rs.userName);
                        $("input[name='address']").val(rs.address);
                        if (rs.sex == '男') {
                            $('#boy')[0].checked = true;
                        } else if (rs.sex == '女') {
                            $('#girl')[0].checked = true;
                        }
                    }
                });
            });
        });
    </script>
</head>
<body>
userId:<input type="text" name="uId"/><br>
userName:<input type="text" name="uName"/><br>
address:<input type="text" name="address"/><br>
sex:<input type="radio" name="sex" id="boy"/>男
<input type="radio" name="sex" id="girl"/>女
</body>
</html>

public class User {
    private Long userId;
    private String userName;
    private String address;
    private String sex;

    public User() {
    }

    public User(Long userId, String userName, String address, String sex) {
        this.userId = userId;
        this.userName = userName;
        this.address = address;
        this.sex = sex;
    }

    @Override
    public String toString() {
        return "User{" +
                "userId=" + userId +
                ", userName='" + userName + '\'' +
                ", address='" + address + '\'' +
                ", sex='" + sex + '\'' +
                '}';
    }

    public Long getUserId() {
        return userId;
    }

    public void setUserId(Long userId) {
        this.userId = userId;
    }

    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }

    public String getAddress() {
        return address;
    }

    public void setAddress(String address) {
        this.address = address;
    }

    public String getSex() {
        return sex;
    }

    public void setSex(String sex) {
        this.sex = sex;
    }
}

@WebServlet(name = "userServlet",urlPatterns = "/getUser")
public class UserServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String userId=req.getParameter("userId");
        User user=new User();
        switch (userId){
            case "1":
                user.setUserName("张三");
                user.setAddress("北京");
                user.setSex("男");
                break;
            case "2":
                user.setUserName("李四");
                user.setAddress("北京");
                user.setSex("女");
                break;
            case "3":
                user.setUserName("王平");
                user.setAddress("兰州");
                user.setSex("男");
                break;
            default:
                user.setUserName("");
                user.setAddress("");
                user.setSex("");
        }
        //将User对象响应给客户端
        resp.setContentType("text/html;charset=utf-8");
        PrintWriter writer = resp.getWriter();
        //对象转换成json格式
        JSONObject jsonObject = JSONObject.fromObject(user);
        writer.println(jsonObject);
    }
}

笑谈子云亭

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
1
评论
ajax与json

一、Ajax技术和原理1.1、简介AJAX=Asynchronous Javascript and Xml (异步的javascript和xml)Ajax不是一种新的编程语言，而是一种使用现有标准的新方法。Ajax与服务器交换数据并更新部分网页的艺术，在于不重新加载整个页面。1.2、包含的技术使用CSS和XHTML来显示使用DOM模型来交互和动态显示使用XMLHttpRequest来和服务器进行异步通信使用javascript来绑定和调用Ajax的核心是XMLHttpRequest对
复制链接

扫一扫