Ajax使用教程及JSON格式介绍

第十一章 AJAX和JSON 1.AJAX

Asynchronous Javascript and XML

异步的js和xml

1. 创建异步请求的步骤

创建异步请求

let request

//1)此函数用来创建异步请求
function create(){
    //创建一个异步请求
    
	request = new XMLHttpRequest()
}

创建函数用来发送请求

//2)此函数用来给服务器发送请求，一般称之为主函数（非官方）
function checkName(value){
	//A:创建异步请求
	create()
    //B:给服务器发送异步请求
    
	request.open('post','check',true)
    //C:如果使用POST则需要书写此句，表示使用字符流进行值的传递，GET自动字符流不需要书写
    request.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
    //D:声明回调函数
    //注意这里函数名可以随意书写，但是没有括号，如果存在括号则表示调用，没有括号表示声明
    //调用立刻执行，而声名需要前面的条件满足才可以
    request.onreadystatechange = callback
    //E:设置传递的参数，注意POST从此处传递值，GET不从此处传值，也必须书写，填写null
    //request.send('etoak='+value)
    request.send(`etoak=${value}`)
}

书写回调函数接受响应信息

readyState状态

readyState值	状态	补充描述
0	链接尚未初始化	调用request.oprn()
1	链接初始化	请求已经准备好
2	请求正在处理	服务器正在处理请求时会做出一个相应，readyState=2时，响应收不提供一个关于响应的信息，并提供一个状态码
3	得到服务器的响应	这个阶段数据下载到请求对象，但是响应数据还没有准备好，不能使用
4	服务器响应准备就绪	现在服务器处理完请求数据可以使用了

status状态

状态码	描述
1xx	消息
2xx	成功
3xx	重定向
4xx	请求错误404 405
5xx	服务端异常 500

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7WBX7wxj-1594441116061)(D:StudyYitu前端AJAXAjaxDaysOfficialattachmentajax回调函数.jpg)]

//3)回调函数，接受服务器处理完的响应信息
function callback(){
	//首先判断服务器发送数据是否完整
    if(request.readyState==4){
        //完整的返回的数据没有报错
        if(request.status==200){
            //接受返回的字符串
            let value = request.responseText

            //拿取span元素
            let nodeSpan = document.getElementById('name_msg')

            //拿取submit表单元素
            let nodeSub = document.getElementById('sub')

            if(value=='bingo'){
                //设置错误提示信息
                nodeSpan.innerHTML = '

用户姓名已经被占用'
                //设置样式
                nodeSpan.style.color = 'red'
                //禁用提交按钮
                nodeSub.disabled = true
                return;
            }
            nodeSpan.innerHTML = '

用户姓名可以使用'
            nodeSpan.style.color = 'green'
            nodeSub.disabled = false
        }
    }
}

@WebServlet("/check")
public class CheckName extends HttpServlet {
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		response.setContentType("text/plain;charset=utf-8");
		request.setCharacterEncoding("utf-8");

		//拿取要输出的字符流
		PrintWriter out = response.getWriter();

		//接受提交过来的用户名
		String name = request.getParameter("etoak");

		//模拟数据库查询
		if(name.equalsIgnoreCase("elena")){
			
			out.print("bingo");
			out.close();
			return;
		}
		out.print("suc");
		out.close();
	}

注意点

servlet只能书写一下三种MIME标签

Ajax支持三种数据的输出

1)字符串 text/plain

2)xml text/xml

3)json application/json

所以在这里不管怎么书写也不能书写text/html，因为根本不支持html

给POST请求设置编码

request.setRequestHeader(‘Content-Type’,‘application/x-www-form-urlencoded’)

如果写错了会有500错误，提示response.send()这里报错，如果这里出错就找设置编码的

2. JSON

Javascript Object Notation

2004年诞生，2006年加入ajax技术体系，是一种轻量级的数据交换格式，成功的取代了xml，用来封装批量数据，不需要再次构建一个document对象，由于其普遍性被称之为Java的第十种常用数据类型

JSON可以同时在Java端和Js中使用

JSON其实就是一种特定格式的字符串，可以直接被打印

JSON属于第三方技术，使用时需要导入jar包

JSON存在三种封装格式，可以将数据封装为标准的JSON格式

1. Map格式

{key1:value1,key2:value2,key3:value3,keyN:valueN}

key:必须是字符串

value: 八种基本数据类型、null、String、自定义数类型、JSON

注意不能直接放置java.util.Date

//1:可以封装任意数据，封装之后呈现Map格式的JSON
			String str = "etoak";
			int i = 3;
			boolean flag = true;
			String[] strAr = {"济南","杭州","青岛"};

			JSonObject jo = new JSONObject();
			jo.put("key1",str);
			jo.put("key2",i);
			jo.put("key3",flag);
			jo.put("key4",strAr);
			//{"key1":"etoak","key2":3,"key3":true,"key4":["济南","杭州","青岛"]}
			
			System.out.println(jo);

			JSonObject jo2 = new JSONObject();
			jo2.put("boy",new Boy(1,"张三","et@etoak.com","33333"));
			//{"boy":{"phone":"33333","name":"张三","id":1,"email":"et@etoak.com"}}
			System.out.println(jo2);

			//------------------------------------------------------------------------------
			//2:专门封装Map和自定义数据类型，封装之后呈现Map类型的JSON
			Map map = new HashMap<>();
			map.put(1,"Java");
			map.put(2,"Javascript");
			map.put(3,"C");
			map.put(4,"C++");
			map.put(5,"Python");
			JSonObject js = JSONObject.fromObject(map);
			//{"1":"Java","2":"Javascript","3":"C","4":"C++","5":"Python"}
			System.out.println(js);

			Boy bo = new Boy(2,"elena","et02@etoak.com","55555");
			JSonObject js2 = JSONObject.fromObject(bo);
			//{"phone":"55555","name":"elena","id":2,"email":"et02@etoak.com"}
			System.out.println(js2);
			//可以对自定义数据类型中的属性进行有选择的封装
			JsonConfig jf = new JsonConfig();
			//设置不需要封装的字段
			jf.setExcludes(new String[]{"id","phone"});
			//注意这里设置了两个参数
			JSonObject js3 = JSONObject.fromObject(bo,jf);
			//{"name":"elena","email":"et02@etoak.com"}
			System.out.println(js3);

2.数组格式

[value1,value2,value3,valueN]

value: 八种基本数据类型、null、String、自定义数类型、JSON

注意不能直接放置java.util.Date

//3:专门封装Set List 和 数组，封装之后呈现数组格式的json
JSonArray ja1 = JSONArray.fromObject(strAr);
//["济南","杭州","青岛"]
System.out.println(ja1);

List list = new ArrayList();
list.add("jQuery");
list.add("ExtJs");
list.add("Vue");
list.add("Angular");
list.add("React");
JSonArray ja2 = JSONArray.fromObject(list);
//["jQuery","ExtJs","Vue","Angular","React"]
System.out.println(ja2);

Set set = new HashSet();
set.add("山东鲁能");
set.add("上海申花");
set.add("北京国安");
set.add("上海上港");
JSonArray ja3 = JSONArray.fromObject(set);
//["北京国安","上海申花","山东鲁能","上海上港"]
System.out.println(ja3);

3.添加数据

1.直接添加

//{"key1":"etoak","key2":3,"key3":true,"key4":["济南","杭州","青岛"]}

JSonObject jo = new JSONObject();
jo.put("key1",str);
jo.put("key2",i);
jo.put("key3",flag);
jo.put("key4",strAr);

使用fromObject()

//2:专门封装Map和自定义数据类型，封装之后呈现Map类型的JSON
Map map = new HashMap<>();
map.put(1,"Java");
map.put(2,"Javascript");
map.put(3,"C");
map.put(4,"C++");
map.put(5,"Python");
JSonObject js = JSONObject.fromObject(map);

专门封装Set 、List、和数组

List list = new ArrayList();
Collections.addAll(list,"Jquery","EasyUI","LayUI");
JSonArray ja = JSONArray.fromObject(list);

三种封装方式

封装任意数据类型，封装之后呈现Map格式的JSON封装Map和自定义数据类型，封装之后呈现Map格式的JSON，并且可以针对性封装封装数组 List 和 Set，封装之后呈现数组类型的JSON，也可以针对向的封装

强调:不能直接封装java.util.Date

4.JS解析JSON

JSON格式返回回来仅仅呗看做一个普通的字符串

从服务器返回的是一个标准的JSON格式的字符串，js并不能识别json

而仅仅将其作为字符串处理，我们现有的字符串技术无法很方便的拿取内部封装的信息
Json提供了一个转换器，可以将字符串中的键转换为js对象的属性名，将值转换为

js对象的属性值

{“etoak”:[{“name”:“山东”,“id”:1},{“name”:“湖北”,“id”:2},{“name”:“上海”,“id”:3},{“name”:“广东”,“id”:4},{“name”:“香港”,“id”:5},{“name”:“台湾”,“id”:6}]}

这个json被转换为一个js对象

转换成对象之后，可以根据

属性值 = 对象.属性名来拿取封装的数据

//获取到JSON以后需要进行转换才能转换成JSON格式
let text = request.responseText
let json = JSON.parse(text)

3.案例

实现省份的选择



	
		
		3)级联
	
	
		
		请选择省份(直辖市，区划):
		

		请选择城市(区划):

Ajax使用教程及JSON格式介绍

Java相关栏目本月热门文章