侧边栏壁纸
博主头像
coydone博主等级

记录学习,分享生活的个人站点

  • 累计撰写 306 篇文章
  • 累计创建 51 个标签
  • 累计收到 0 条评论

目 录CONTENT

文章目录

AJAX

coydone
2022-02-02 / 0 评论 / 0 点赞 / 518 阅读 / 7,481 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-04-09,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

AJAX概述

Ajax (Asynchronous JavaScript and XML)异步的JavaScript和XML。它并不是一种全新的技术,而是由JavaScript 、XML、CSS等几种现有技术整合而成。

异步:程序执行,两端代码互不干扰,页面只更新一部分内容。

同步:程序执行,必须上面的代码执行完毕后,后面的代码才可以执行,页面不管更新多少内容,整个页面都需要更新。

Ajax与传统web开发技术的区别

  1. 发送请求的方式不同:传统方式通过浏览器发送;Ajax技术通过JavaScript的XMLHttpRequest对象发送的。

  2. 服务器响应不同:传统方式服务器响应给浏览器的是一个完整的页面,通过Ajax技术,服务器响应只需要响应数据(JSON)。

  3. 客户端处理响应方式不同:传统方式是浏览器直接把服务器的响应加载成一个新的页面。Ajax只是通过JavaScript动态更新页面中需要更新的部分。

执行流程:

  1. 用户触发事件,调用JavaScript。

  2. 通过Ajax的引擎:XMLHttpRequest对象发送异步的请求到服务器。

  3. 服务器处理完请求后,响应给XMLHttpRequest对象对应格式(文本、XML、JSON、页面等)的数据利用返回的数据,通过JavaScript技术动态更新需要更新的区域。

XMLHttpRequest

XMLHttpRequest:由这个对象发送异步请求到服务器。

怎么获取这个对象?考虑两种情况:

1、主流浏览器 var xhr = new XMLHttpRequest();

2、IE5、IE6 var xhr = new ActiveXObject(“Microsoft.XMLHTTP”);

方法 说明
open( String method, String url,boolean async) 创建一个新的HTTP请求。method:异步请求的提交方式:get、post。url:异步请求的路径。async:发送的请求是同步还是异步 ,默认为异步 true
send( String data ) 发送请求到服务器端。data:提交到服务器的数据,如果是get请求,这儿写null;参数在发送的URL后面拼接如果是post请求,参数这儿正常写就可以 name=张三&age=18
abort( ) 取消当前请求
setRequestHeader(String header, String value ) 设置请求的某个HTTP头信息。发送post请求必须得设置这个头信息。Header:Content-Type,Value: application/x-www-form-urlencoded
getResponseHeader(String header) 获取响应的指定HTTP头信息
getAllResponseHeader( ) 获取响应的所有HTTP头信息
onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。0:请求未初始化,1:服务器连接已建立,2:请求已接收,3:请求处理中,4:请求已完成,且响应已就绪
status 200: “OK”,404: 未找到页面
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。

原生AJAX请求的示例

<!DOCTYPE html>
<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <script type="text/javascript">
         //在这里使用js发起ajax请求,访问服务器AjaxServlet中的javaScriptAjax
         function ajaxRequest(){
             //1.创建XMLHttpRequest对象
             var xhr;
             //判断浏览器
             if (window.XMLHttpRequest){ //主流浏览器
                 xhr = new XMLHttpRequest();
             } else { //IE5、IE6
                  xhr = new ActiveXObject("Microsoft.XMLHTTP");
             }
             //2、创建XMLHttpRequest
             var xmlhttprequest = new XMLHttpRequest();
             //3、调用open方法设置请求参数
             xmlhttprequest.open("GET","http://localhost:8080/ajax/ajaxServlet?action=javaScriptAjax",true)
             //5、在send方法前绑定onreadystatechange事件,处理请求完成后的操作
             xmlhttprequest.onreadystatechange = function(){ 
                 if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) { 
                     var jsonObj = JSON.parse(xmlhttprequest.responseText);
                     // 把响应的数据显示在页面上
                     document.getElementById("div01").innerHTML = "编号:" + jsonObj.id + " , 姓名:" + jsonObj.name;
                 }
             }
             //4、调用send方法发送请求
             xmlhttprequest.send();
         }
     </script>
 </head>
 <body>
     <button onclick="ajaxRequest()">ajax request</button>
     <div id="div01">
     </div>
 </body>
</html>

Servlet中代码

Person person = new Person(1,"张三");
//json格式的字符串
Gson gson = new Gson();
String personJsonString = gson.toJson(person);
resq.getWriter.write(personJsonString);

封装原生JS的Ajax

ajaxJs.js中进行封装:

/**
 * 封装原生ajax
 * @param options 这是一个对象 用于放置发送ajax必须的参数
 *  比如:发送的请求的方式 :type :get.post
 *        请求的参数 ;data  "name"=张三&"age"=23  {name:zhangsan,age:23}
 *        请求到后台的路径;url
 *        请求成功后的处理函数
 */
function ajax(options) {
    //判断传入的对象如果为空,给一个默认值
    options = options || {};
    //设置请求发送 默认为get请求 toUpperCase:把传过来的单词转换成大写
    options.type = (options.type || "GET").toUpperCase();
    //对请求参数做处理 把{name:zhangsan,age:23}中发送的参数,转换成"name"=张三&"age"=23方式。
    var params = formateParams(options.data);
    //创建XMLHttpRequest对象
    var xhr;
    //判断浏览器
    if (window.XMLHttpRequest){ //主流浏览器
        xhr = new XMLHttpRequest();
    } else { //IE5\IE6
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //判断用户是get提交还是post提交
    if(options.type == "GET"){
        //创建异步请求
        xhr.open("GET",options.url+"?"+params,true);
        //发送异步请求
        xhr.send(null);
    }else if(options.type == "POST"){
        //创建异步请求
        xhr.open("POST",options.url,true);
        //设置post提交的请求头信息
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        //发送异步请求
        xhr.send(params);
    }
    //回调函数
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4){
            var status = xhr.status;
            if (status == 200) { //响应成功
                options.success(xhr.responseText);
            }else{ //响应失败
                options.error(status);
            }
        }
    }
}
/*对用户传入的参数进行格式化处理*/
function formateParams(data) {
    //判断用户传入的是字符串还是对象
    var result = typeof data;
    if (result == "string") {
        return data;
    }else if (result == "object"){
        //需要把对象拼接成上面的字符 k=v&k=v
        var arr = [];
        for(var name in data){
            //在拼接的时候建议对中文进行转码,就像cookie往浏览器中存中文一样
            arr.push(encodeURIComponent(name)+"="+encodeURIComponent(data[name])); //往数组中添加元素
        }
        //把数组转换成字符串 [name=zhangsan,age=23]  k=v&k=v
        return arr.join("&");
    }
}

测试封装:

<html>
<head>
    <title>封装ajax测试</title>
</head>
<body>
    <script src="js/ajaxJs.js"></script>
    <script>
        //创建一个对象,来定义一下发送异步请求必须的参数
        /*var obj = {
            data: "name=张三&age=25",
            url: "/ajax/test01",
            success: function (data) {
                console.log(data);
            }
        }*/
        //调用ajax
        // ajax(obj);
        ajax({
            type: "post",
            data:{name:"李四",age:26},
            url: "/ajax/test01",
            success: function (data) {
                console.log(data); // json
               // JSON.parse(data) // 还需要把json转换成js对象
            }
        });
    </script>
</body>
</html>

JQuery中的Ajax请求

$.ajax 方法

  • url 表示请求的地址。

  • type 表示请求的类型 GET 或 POST 请求。

  • data 表示发送给服务器的数据 格式有两种: name=value&name=value{key:value}

  • success 请求成功,响应的回调函数。

  • dataType 响应的数据类型 常用的数据类型有:text表示纯文本、xml 表示 xml 数据 、json 表示 json 对象。

$("#ajaxBtn").click(function(){
    $.ajax({ 
        url:"http://localhost:8080/ajax/ajaxServlet", 
        // data:"action=jQueryAjax", 
        data:{action:"jQueryAjax"}, 
        type:"GET", 
        success:function (data) { 
            // alert("服务器返回的数据是:" + data); 
            // var jsonObj = JSON.parse(data); 
            $("#msg").html("编号:" + data.id + " , 姓名:" + data.name); 
        },
        dataType : "json" 
    }); 
});

$.get 方法和$.post方法

  • url:请求的 url 地址。

  • data:发送的数据。

  • callback:成功的回调函数。

  • type:返回的数据类型。

// ajax--get 请求 
$("#getBtn").click(function(){
        $.get("http://localhost:8080/ajax/ajaxServlet","action=jQueryGet",function (data) {
        $("#msg").html(" get 编号:" + data.id + " , 姓名:" + data.name); },"json");
});
// ajax--post 请求
$("#postBtn").click(function(){ 
  $.post("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryPost",function (data) { 
      $("#msg").html(" post 编号:" + data.id + " , 姓名:" + data.name);
},"json"); 
});

$.getJSON 方法

  • url:请求的 url 地址。

  • data:发送给服务器的数据。

  • callback:成功的回调函数。

// ajax--getJson 请求
$("#getJSONBtn").click(function(){ 
  $.getJSON("http://localhost:8080/ajax/ajaxServlet","action=jQueryGetJSON",function (data) { 
      $("#msg").html(" getJSON 编号:" + data.id + " , 姓名:" + data.name); 
  }); 
});

表单序列化serialize()

serialize()可以把表单中所有表单项的内容都获取到,并以 name=value&name=value的形式进行拼接。

// ajax 请求 
$("#submit").click(function(){
    // 把参数序列化 
  $.getJSON("http://localhost:8080/ajax/ajaxServlet","action=jQuerySerialize&" + $("#form01").serialize(),function (data) { 
      $("#msg").html(" Serialize 编号:" + data.id + " , 姓名:" + data.name); 
  }); 
});
0

评论区