SentralLiu

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
13.AJAX

jQuery AJAX简介

  • AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript And XML）。

  • 简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。

 get和post方法

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

$.get(URL,callback);

  • 必需的 URL 参数规定您希望请求的 URL。

  • 可选的 callback 参数是请求成功后所执行的函数名。

  • 下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据：

$("button").click(function(){
  $.get("demo_test.php",function(data){
    alert("数据: " + data );
  });
});

  • $.post() 方法通过 HTTP POST 请求从服务器上请求数据。

    • $.post(URL,data,callback);

    • 必需的 URL 参数规定您希望请求的 URL。

    • 可选的 data 参数规定连同请求发送的数据。

    • 可选的 callback 参数是请求成功后所执行的函数名。

  • 下面的例子使用 $.post() 连同请求一起发送数据：

$("button").click(function(){
    $.post("/try/ajax/demo_test_post.jsp",
    {
        name:"百度",
        url:"http://www.baidu.com"
    },
        function(data){
        alert("数据: \n" + data );
    });
});

 ajax()方法

  • jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。

  • 最简单的情况下，$.ajax()可以不带任何参数直接使用

json数据与对象

（fastjson解析：阿里巴巴提供）

//json转对象
JSON.parseObject(json, Gread.class)
//json转字符串数组
JSON.parseArray(json2, String.class)

参数1：为json数据字符串

参数2：为匹配的反射对象

注意：此处json的数据中的key要与对象的属性名一致

//Java对象转json数据
JSON.toJSONString(gread1)

参数为Java对象

JavaScript原生的ajax请求

//1获取xml请求对象
var httpXml = new XMLHttpRequest();
//2发送请求数据
httpXml.open("请求方式","路径",是否异步);
httpXml.send();
//3回调函数
httpXml.onreadystatechange=function (){
    //判断服务器是否处理完毕 status页面状态200为交易成功 readyState后台处理状态，4处理完成
    if (httpXml.status==200&&httpXml.readyState==4){
        //回调执行代码
    }
}

参数的拼接格式：?key=value&key2=value2 get请求：效率高(直接通过url传参数)，不安全（直接暴露参数） post请求：效率低(参数封装到请求体)，安全

$.post("reg.jsp","name="+name,function (data)

---------JSP代码----------

将jsp文件充当后台服务器的操作
tomcat则是web服务器容器，servlet/jsp的后台代码，都需要通过启动容器才能访问
该区域，就是用于写java代码的区域
request:请求对象，用于接收客户端过来的数据
response：响应对象，用于给客户端反馈数据
String name = request.getParameter("key"); //此处的key为json数据的键，否则读不出来值
if(name.equals("zs")){
    response.getWriter().write("1");  //此处传字符串“1” 返回字符串，前端jQuery只比较值不比较类型
}else{
    response.getWriter().write("0");  //传“0”，恭喜可用
}
 

1.3 Ajax异步加载jQuery $.get,$.post等异步加载；$.ajax相比之前的，功能更强大，封装了更多东西
 

  //ajax请求
            $.ajax({
                type:"get",  //不写，默认是get请求
                url:"aj.jsp",    //url(服务器路径)
                data:"name=zs&age=30",  //传参数
                success:function (data) {  //成功后的回调
                    $("div").html(data);
                },
                error:function(){   //服务器出错了的反馈
                    alert("产生了错误");
                },
                beforeSend:function () {
                    $("div").html("<img src='img/Loading.gif'>服务器正在闹情绪，程序员正试图安抚它");
                }
            })
 

 

2.Java中的Json数据
 

概述：轻量级的数据交换格式 简单地说，json数据就是一个带格式的字符串 用途：主要用于传输数据 使用：解析数据方向
 

  1.  
    已知json数据解析后，存对象
     
  2.  
    已知对象，产生json数据
     


格式：json字符串外层为{}或[] {} 代表对象 []代表数组或集合 里面的值： {key:value,ke1:value2}
 

2.1 FastJson解析（重点）是阿里巴巴提供的json解析工具
 

 
 
  •  
    Fastjson 是一个 Java 库，可以将 Java 对象转换为 JSON 格式，当然它也可以将 JSON 字符串转换为 Java 对象
     
  •  
    提供了 toJSONString() 和 parseObject() 方法来将 Java 对象与 JSON 相互转换：
     
   
    •  
      调用toJSONString方 法即可将对象转换成 JSON 字符串
       
    •  
      parseObject 方法则反过来将 JSON 字符串转换成对象。
       


 

 
 
parseObject方法：字符串转换成对象
 

 

 //1，已知外层为{}的json数据，解析成对象 该对象对应key为属性，value为数组的为对应对象的集合
        String json = "{'id':1,'name':'java_2109','stus':[{'id':1001,'name':'zsf'}]}";
        //注意：json数据的key一定要与实体属性名一致，才能注入值
        Grade grade = JSON.parseObject(json, Grade.class);
​
        //2.已知外层为[]的json数据
        String json2 = "['北京','天津','杭州']";
        List<String> list = JSON.parseArray(json2,String.class);
​
        //3.已知对象产生json数据
        List<Student> list1 = new ArrayList<>();
        list1.add(new Student(1001,"凤姐"));
        Grade grade1 = new Grade(1,"java_219",list1);
        String json3 = JSON.toJSONString(grade1);
 

2.2 Jackson解析
 

 
 
  •  
    Jackson 是一个能够将Java对象序列化为JSON字符串，也能够将JSON字符串反序列化为Java对象的框架；
     
  •  
    通过方法readValue和writeValue实现；
     


 

        String json1 = "{\"id\":1,\"name\":\"JAVAEE-1703\",\"stus\":[{\"id\":101,\"name\":\"刘一\"}]}";
        //1.已知json数据，解析成对象
        ObjectMapper mapper = new ObjectMapper();
        Grade grade = mapper.readValue(json1, Grade.class);
​
        //2.一致json数据，解析成集合
        String json2 = "[\"北京\",\"天津\",\"杭州\"]";
        List<String> list = mapper.readValue(json2,new TypeReference<List<String>>(){});
​
        //3.一致对象产生json数据
        List<Student> list1 = new ArrayList<>();
        list1.add(new Student(1002,"郭德纲"));
        Grade grade1 = new Grade(1,"ui_2103",list1);
        String json3 = mapper.writeValueAsString(grade1);
 

2.3 js的json解析（重点）
 

function parse() {
    //1.将对象转为json数据
    var obj = {id:1001,name:'liuyifei'};
    var strJson = JSON.stringify(obj);
​
    //2.将json字符串解析为对象
    var jsonObj = JSON.parse(strJson);
}
 

3.原生Ajax(重点)
 

概述：与jquery的ajax一致，此处是原生步骤，jquery的ajax是封装好的 用途：异步的局部刷新 操作步骤：与jquery的不同，此处需要js结合xml使用 1.获取xml的请求对象 2.发送请求：open()，send() 3.回调函数：判断回调状态及返回页面是否成功
 

  •  
    AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
     
  •  
    AJAX = Asynchronous异步 JavaScript and XML。
     
  •  
    AJAX 是一种用于创建快速动态网页的技术。
     
  •  
    通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
     
  •  
    传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页。
     


function loadXMLDoc() {
        //原生ajax操作步骤：
        //1.获取xml的请求对象
        var xmlHttp = new XMLHttpRequest();
        //2.发送请求数据
        //参数1：请求方式   参数2：url+参数(格式?key=value&key2=value2)
        // 参数3：是否为异步
​
        //方式1：常规方式
        //xmlHttp.open("get","basic.jsp?name=zs&age=12",true);
​
     //方式2：清除缓存方式（了解）
        //说明：每次发请求的url不同，那么就不会产生缓存，每次都会从服务器里面取
        //例如：获取验证码
        //xmlHttp.open("get","basic.jsp?name=zs&age=12&d="+new Date(),true);
        //xmlHttp.send();
​
        //post请求
        xmlHttp.open("post","basic.jsp",true);
        //必须使用请求体： 指定文本数据，例如上传图片时，二进制类型
        xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlHttp.send("name=zs&age=12");  //将数据放到请求体发送
​
        //3.回调函数进
        xmlHttp.onreadystatechange=function () {
            //1.判断服务器的处理状态：4代表服务器处理完毕  2.返回页面状态200表示成功
            if(xmlHttp.readyState==4&&xmlHttp.status==200){
                //responseText:接收返回内容
                document.getElementById("myDiv").innerHTML=xmlHttp.responseText;
            }
        }
 

3.4 创建XMLHttpRequest对象
 

var xmlhttp=new XMLHttpRequest();
 

3.5 XMLHttpRequest请求
 

 
 
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
 

 

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
 

方法描述
open(method,url,async)规定请求的类型、URL 以及是否异步处理请求。method：请求的类型；GET 或 POST；url：文件在服务器上的位置；async：true（异步）或 false（同步），并且XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true；
send(string)将请求发送到服务器。string：仅用于 POST 请求


 
 
  •  
    GET 还是 POST？
     
  •  
    与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
     
  •  
    然而，在以下情况中，请使用 POST 请求：
     
   
    •  
      无法使用缓存文件（更新服务器上的文件或数据库）
       
    •  
      向服务器发送大量数据（POST 没有数据量限制）
       
    •  
      发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
       


 

 

方法描述
setRequestHeader(header,value)向请求添加 HTTP 头。header: 规定头的名称 value: 规定头的值


 
 
  •  
    对于 web 开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前，这可能会引起应用程序挂起或停止。
     
  •  
    通过 AJAX，JavaScript 无需等待服务器的响应，而是：
     
   
    •  
      在等待服务器响应时执行其他脚本
       
    •  
      当响应就绪后对响应进行处理
       
  •  
    当使用Async=true时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数
     


 

 

  •  
    如需使用 async=false，请将 open() 方法中的第三个参数改为 false：
     
  •  
    我们不推荐使用 async=false，但是对于一些小型的请求，也是可以的。
     
  •  
    请记住，JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。
     
  •  
    注意：当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可：
     


3.6 readyState
 

 
 
  •  
    每当 readyState 改变时，就会触发 onreadystatechange 事件。
     
  •  
    在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
     
  •  
    readyState 属性存有 XMLHttpRequest 的状态信息。
     
  •  
    当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
     
  •  
    下面是 XMLHttpRequest 对象的三个重要的属性：
     


 

属性描述
onreadystatechange存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。0: 请求未初始化1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成，且响应已就绪
status例：200: "OK" ；404: 未找到页面


3.7 XMLHttpRequest响应
 

 
 
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
 

 

属性描述
responseText获得字符串形式的响应数据。
responseXML获得 XML 形式的响应数据。


 
 
  •  
    responseText 属性
     
   
    •  
      如果来自服务器的响应并非 XML，请使用 responseText 属性。
       
    •  
      responseText 属性返回字符串形式的响应，因此您可以这样使用：
       


 

responseXML 属性
 

  •  
    如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性：
     


3.8 使用回调函数
 

  •  
    回调函数是一种以参数形式传递给另一个函数的函数。
     
  •  
    如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。
     
  •  
    该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：
     


 

 


                





        

	
        

            posted on 
2021-12-01 20:42 
SentralLiu 
阅读(29) 
评论(0) 
 
收藏 
举报