6 Ajax & JSON

一、什么是Ajax

1.1 概述

AJAX(Asynchronous JavaScript and XML) 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,这意味着可以在不重载整个页面的情况下,对网页的某些部分进行更新。AJAX 通过在后台与服务器进行少量数据交换,使网页实现异步更新。
传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个页面

1.2 原理

浏览器通过后台发送请求,不提交网页,获得数据后更新页面中的局部区域。


二、使用方式

2.1 创建XMLHttpRequest对象

function get( url, callback ,dataType ){
        var xmlhttp;
        if (window.XMLHttpRequest)
        {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp=new XMLHttpRequest();
        }
        else
        {
            // IE6, IE5 浏览器执行代码
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }

         xmlhttp.onreadystatechange=function()
          {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                 callback( dataType==='json'?JSON.parse( xmlhttp.responseText ):   xmlhttp.responseText       )
            }
          }
        xmlhttp.open("GET",url);
        xmlhttp.send();
}

2.2 回调监听

2.2.1 onreadystatechange
xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
	}
 

2.2.2 就绪状态码和响应状态码
readyState存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4: 请求已完成,且响应已就绪
status
- 200 响应成功
- 404 页面找不到
- 500 后台异常

** 更多响应状态码**

状态码状态码英文名称中文描述
100Continue继续。客户端应继续其请求
101Switching Protocols切换协议。服务器根据客户端的请求切换协议。只能切换到更高级的协议,例如,切换到HTTP的新版本协议
200OK请求成功。一般用于GET与POST请求
201Created已创建。成功请求并创建了新的资源
202Accepted已接受。已经接受请求,但未处理完成
203Non-Authoritative Information非授权信息。请求成功。但返回的meta信息不在原始的服务器,而是一个副本
204No Content无内容。服务器成功处理,但未返回内容。在未更新网页的情况下,可确保浏览器继续显示当前文档
205Reset Content重置内容。服务器处理成功,用户终端(例如:浏览器)应重置文档视图。可通过此返回码清除浏览器的表单域
206Partial Content部分内容。服务器成功处理了部分GET请求
300Multiple Choices多种选择。请求的资源可包括多个位置,相应可返回一个资源特征与地址的列表用于用户终端(例如:浏览器)选择
301Moved Permanently永久移动。请求的资源已被永久的移动到新URI,返回信息会包括新的URI,浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替
302Found临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI
303See Other查看其它地址。与301类似。使用GET和POST请求查看
304Not Modified未修改。所请求的资源未修改,服务器返回此状态码时,不会返回任何资源。客户端通常会缓存访问过的资源,通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源
305Use Proxy使用代理。所请求的资源必须通过代理访问
306Unused已经被废弃的HTTP状态码
307Temporary Redirect临时重定向。与302类似。使用GET请求重定向
400Bad Request客户端请求的语法错误,服务器无法理解
401Unauthorized请求要求用户的身份认证
402Payment Required保留,将来使用
403Forbidden服务器理解请求客户端的请求,但是拒绝执行此请求
404Not Found服务器无法根据客户端的请求找到资源(网页)。通过此代码,网站设计人员可设置"您所请求的资源无法找到"的个性页面
405Method Not Allowed客户端请求中的方法被禁止
406Not Acceptable服务器无法根据客户端请求的内容特性完成请求
407Proxy Authentication Required请求要求代理的身份认证,与401类似,但请求者应当使用代理进行授权
408Request Time-out服务器等待客户端发送的请求时间过长,超时
409Conflict服务器完成客户端的 PUT 请求时可能返回此代码,服务器处理请求时发生了冲突
410Gone客户端请求的资源已经不存在。410不同于404,如果资源以前有现在被永久删除了可使用410代码,网站设计人员可通过301代码指定资源的新位置
411Length Required服务器无法处理客户端发送的不带Content-Length的请求信息
412Precondition Failed客户端请求信息的先决条件错误
413Request Entity Too Large由于请求的实体过大,服务器无法处理,因此拒绝请求。为防止客户端的连续请求,服务器可能会关闭连接。如果只是服务器暂时无法处理,则会包含一个Retry-After的响应信息
414Request-URI Too Large请求的URI过长(URI通常为网址),服务器无法处理
415Unsupported Media Type服务器无法处理请求附带的媒体格式
416Requested range not satisfiable客户端请求的范围无效
417Expectation Failed服务器无法满足Expect的请求头信息
500Internal Server Error服务器内部错误,无法完成请求
501Not Implemented服务器不支持请求的功能,无法完成请求
502Bad Gateway作为网关或者代理工作的服务器尝试执行请求时,从远程服务器接收到了一个无效的响应
503Service Unavailable由于超载或系统维护,服务器暂时的无法处理客户端的请求。延时的长度可包含在服务器的Retry-After头信息中
504Gateway Time-out充当网关或代理的服务器,未及时从远端服务器获取请求
505HTTP Version not supported服务器不支持请求的HTTP协议的版本,无法完成处理

2.3 发送GET请求

2.3.1 普通get
xmlhttp.open("GET","/try/ajax/demo_get.do");
xmlhttp.send();

2.3.2 发送数据
xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford");
xmlhttp.send();

2.4 发送POST请求

2.4.1 发送请求
xmlhttp.open("POST","/try/ajax/demo_post.php");
xmlhttp.send();

2.4.1 发送请求和数据
xmlhttp.open("POST","/try/ajax/demo_post2.php");
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

2.5 响应数据

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

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

2.6 服务端处理程序

Servlet
@WebServlet("/ajax/test.do")
public class FirstAjaxController extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
         resp.getWriter().println("我是张家辉,你送的年龄为"+req.getParameter("age"));
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.getWriter().println("我是重庆吴彦祖,你送的年龄为"+req.getParameter("age")+req.getParameter("name"));
    }
}

三、JSON 格式

文本
小西,90,小吴

XML
<book>
   <name>小西</name> 
   <price>999</price> 
   <author>小吴</author> 
</book>

JSON
{"name":"小西","price":999,"author":"小吴"}

3.1 什么是JSON

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。

var person = {
    name: "小刘",
    age:10
}

"helloworld"
"{'a':'hello',}"

ArrayList


 var config={ 
     url:"/xxx.do"
     method:'post',
     successs( data ){
         
     }
 }
$.ajax(config)

xhr.open(config.method,config.url)
xhr.onredadStateChange=function(){
      if(xhr.readyState=4){
         successs(xhr.responseText);
      }
 }


java对象  =>  {"name":"小刘" , "age" : 10 }  =>  js 对象

3.2 JSON与XML 区别

与 XML 相同之处
  • JSON 是纯文本
  • JSON 具有"自我描述性"(人类可读)
  • JSON 具有层级结构(值中存在值)
  • JSON 可通过 JavaScript 进行解析
  • JSON 数据可使用 AJAX 进行传输
与 XML 不同之处
  • 没有结束标签
  • 更短
  • 读写的速度更快
  • 能够使用内建的 JSON.parse 方法进行解析
  • 使用数组
  • 不使用保留字

3.3 JSON转换

3.3.1 JavaScript 处理JSON
  • JSON.parse(jsonstr); //可以将json字符串转换成json对象(JS对象)
  • JSON.stringify(jsobj); //可以将json对象转换成json字符串
 <script>
     //json 对象
     var jsonStr = "{\"id\":\"8\",\"name\":\"小范\",\"size\":\"G\"}";
     //json 数组
     var jsonArray = "[{\"id\":\"8\",\"name\":\"小范\",\"size\":\"G\"},{\"id\":\"8\",\"name\":\"小李\",\"size\":\"G\"}   ]";

     // JSON.parse( json格式的字符串 )  json字符串 = > JS对象(数组)  ********
     //转对象
     var obj = JSON.parse(jsonStr);
     console.log(obj.id,obj.name,obj.size);

     //转数组
     var arr = JSON.parse(jsonArray);
     arr.forEach( function (v,i) {
           console.log(v.name)
     })

     // JSON.stringify( js对象 )   JS对象 = > JSON字符串  ********
     var perosn = { name:"张三",age:10};
     var json = JSON.stringify(perosn);
     console.log(json)

 </script>

3.3.2 Java处理JSON
  • fastjson 阿里出品 快
  • gson 谷歌出品
  • jackson 老牌稳定
  • json-lib 搞安卓开发的用的多点

3.4 FastJson 使用

3.4.1 对象转JSON字符串
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setCharacterEncoding("utf-8");
 
        Dog dog = new Dog();
        dog.setId(999);
        dog.setName("来福");
        dog.setAge(8);
        dog.setColor("白色");
        //把java 对象转json字符串
        String json = JSON.toJSONString(dog);
  
        resp.setContentType("application/json");
        resp.getWriter().println(json);

    }

3.4.2 JSON字符转 JAVA对象
 public static void main(String[] args) {
        String xxx = "{\"age\":8,\"color\":\"白色\",\"id\":999,\"name\":\"来福\"}";
        Dog dog1 = JSON.parseObject(xxx, Dog.class);
        System.out.println(dog1);

    }

四、XML 格式

4.1 什么是XML

XML 指可扩展标记语言(Extensible Markup Language),XML 被设计用来传输和存储数据。XML相比HTML它是自由的标签完全是自定义的,就像这样。

<books>
  <book id="1">
    <name>小西</name>
    <price>998.0</price>
  </book>
   <book id="2">
    <name>小郭</name>
    <price>520.0</price>
  </book>
</books> 

4.2 JS 解析XML

//测试字符串
var xmlStr =  text = "<Result>";
    text = text + "<ErrorMessage>OK</ErrorMessage>";
    text = text + "<PrintVersion>2</PrintVersion>";
    text = text + "</Result>";
//解析方法
var xmlParse = function(text) {
    try //Internet Explorer
    {
        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async = "false";
        xmlDoc.loadXML(text);
    } catch (e) {
        try //Firefox, Mozilla, Opera, etc.
        {
            parser = new DOMParser();
            xmlDoc = parser.parseFromString(text, "text/xml"); document
        } catch (e) { alert(e.message) }
    }
    console.log(xmlDoc);
    var errorMessage = xmlDoc.getElementsByTagName('ErrorMessage')[0].textContent;
    var printVersion = xmlDoc.getElementsByTagName('PrintVersion')[0].textContent;
 
    var objData = {};
    objData.errorInfo = errorMessage;
    objData.versionInfo = printVersion;
    console.log(objData);
    return objDate;
};
//测试
var result = xmlParse(xmlStr); //返回结果 {errorInfo: "OK", versionInfo: "2"}

4.3 JAVA解析XML

4.3.1 Dom4J介绍

dom4j是一个Java的XML API,是jdom的升级品,用来读写XML文件的。dom4j是一个十分优秀的JavaXML API,具有性能优异、功能强大和极其易使用的特点,它的性能超过sun公司官方的dom技术, 在Java圈是非常有名的。https://mvnrepository.com/artifact/dom4j/dom4j/1.6.1

4.3.2 Dom4J 解析XML
public static void main(String[] args) throws DocumentException {
        SAXReader reader = new SAXReader();

        Document document = reader.read(new File("XX/book.xml"));

        Element rootElement = document.getRootElement();

        List elements = rootElement.elements();

        elements.forEach(e->{
            Element ex = (Element) e;
            String value = ex.attribute("id").getValue();
            System.out.println(ex.getName()+":"+value);

            List xx = ex.elements();
            xx.forEach(y->{
                Element ey = (Element) y;
                System.out.println(ey.getStringValue());
            });
        });
}

五 JQuery Ajax

jquery Ajax是JQuery 对原生Ajax技术的封装,通过简单的函数调用即可实现异步请求,屏蔽了编写ajax程序的流程,以及各种浏览器的兼容性问题。

使用它的前提是先引入JQuery文件。记住! 记住! 记住 !

**回调 **

5.1 常用方法

jQuery.get(url, [data], [callback], [type])

url:待载入页面的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式,xml, html, script, json, text, _default。

jQuery.post(url, [data], [callback], [type])

url:待载入页面的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式,xml, html, script, json, text, _default。

jQuery.ajax( [settings] )

settings可选配置 非常多,详见 文档 https://jquery.cuishifeng.cn/jQuery.Ajax.html 这里只列举最多使用的
url: 请求地址 ,如果ajax函数第一个参数没配置url settiongs 中也是可以配置的。
**method **: 请求方式 get post 这些
data: 发送给后台的数据
dataType: 后台响应的数据格式
contentType: 发送信息至服务器时内容编码类型 (默认: “application/x-www-form-urlencoded”)

**error **在请求出错时调用。传入XMLHttpRequest对象,描述错误类型的字符串以及一个异常对象(如果有的话)
**success **当请求之后调用。传入返回后的数据,以及包含成功代码的字符串。
**complete **当请求完成之后调用这个函数,无论成功或失败。传入XMLHttpRequest对象,以及一个包含成功或错误代码的字符串。

dataFilter 在请求成功之后调用。传入返回的数据以及"dataType"参数的值。并且必须返回新的数据(可能是处理过的)传递给success回调函数。

五 JQuery Ajax

jquery Ajax是JQuery 对原生Ajax技术的封装,通过简单的函数调用即可实现异步请求,屏蔽了编写ajax程序的流程,以及各种浏览器的兼容性问题。

使用它的前提是先引入JQuery文件。记住! 记住! 记住 !

**回调 **

5.1 常用方法

jQuery.get(url, [data], [callback], [type])

url:待载入页面的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式,xml, html, script, json, text, _default。

jQuery.post(url, [data], [callback], [type])

url:待载入页面的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式,xml, html, script, json, text, _default。

jQuery.ajax( [settings] )

settings可选配置 非常多,详见 文档 https://jquery.cuishifeng.cn/jQuery.Ajax.html 这里只列举最多使用的
url: 请求地址 ,如果ajax函数第一个参数没配置url settiongs 中也是可以配置的。
**method **: 请求方式 get post 这些
data: 发送给后台的数据
dataType: 后台响应的数据格式
contentType: 发送信息至服务器时内容编码类型 (默认: “application/x-www-form-urlencoded”)

**error **在请求出错时调用。传入XMLHttpRequest对象,描述错误类型的字符串以及一个异常对象(如果有的话)
**success **当请求之后调用。传入返回后的数据,以及包含成功代码的字符串。
**complete **当请求完成之后调用这个函数,无论成功或失败。传入XMLHttpRequest对象,以及一个包含成功或错误代码的字符串。

dataFilter 在请求成功之后调用。传入返回的数据以及"dataType"参数的值。并且必须返回新的数据(可能是处理过的)传递给success回调函数。

工具

5.2 ajax 文件上传

ajax 同样可以实现文件上传,这种方式相比同步文件上传个加灵活,同步文件上传往往是,文件域和文本域在一个大表单中,文件上传和业务逻辑耦合在一起,异步文件上传的思路是,把文件单独上传,然后异步返回文件的地址,最后文件地址和文本域一并提交给后台保存,这样文件上传就可以完全独立出来,成为一个公共的模块。

jquery 的ajax 文件上传需要配置以下几个参数

cache: false, 是为了兼容ie8,防止ie8之前版本缓存get请求的处理方式

processData: false, 不让jQuery处理和编码发送的数据

contentType: false, 不让Jquery修改上传文件编码

同时使用formData 来包装发送的文件数据。

var files = $('#xxx').prop('files');
var data = new FormData();
data.append('name', files[0]);

示例:
JQuery文件上传

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/jquery-3.6.0.min.js"></script>
</head>
<body>
 <input id="fileBox" type="file"  > <button onclick="fileUpload()">上传</button>
 <script>
       function fileUpload() {
           var file = document.querySelector("#fileBox").files[0];
           var formData = new FormData();
           formData.append("abc",file);
           $.ajax({
               url:"/ajax/upload.do",
               method:"post",
               dataType:"text",
               data:formData,
               contentType:false,
               processData:false,
               cache:false,
               success(data,xhr){
                   alert(data);
               },
               xhr:function(){
                   var xhr = new XMLHttpRequest();
                   xhr.upload.addEventListener("progress",  function (ev) {
                       console.log(Math.round((ev.loaded/ev.total)*100)+"%",ev.lengthComputable);
                   }, false);
                   return xhr;
               }
           })
       }
 </script>
</body>
</html>

后端接受数据

package com.qfedu.todo.web.controller.ajax;

import com.qfedu.commons.util.http.HttpUtil;

import javax.servlet.ServletException;
import javax.servlet.annotation.MultipartConfig;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.Part;
import java.io.File;
import java.io.IOException;
import java.util.UUID;

@MultipartConfig
@WebServlet("/ajax/upload.do")
public class FileUploadController extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String realPath = this.getServletContext().getRealPath("/upload/");
        File dir = new File(realPath);
        if(!dir.exists()){
            dir.mkdirs();
        }
        Part part = req.getPart("abc");
        String oldName = part.getSubmittedFileName();
        int dot = oldName.lastIndexOf(".");sssss.png
        String suffix = oldName.substring(dot, oldName.length());
        String fileName = UUID.randomUUID().toString().replace("-", "").concat(suffix);
        part.write(realPath.concat(fileName));
        HttpUtil.setTextContent(resp);
        resp.getWriter().println("/upload/"+fileName);
    }
}

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值