0317 ajax

同步请求：客户端发送数据到服务器，当服务器没有给回反应之前，浏览器客户端是处于卡死状态

异步请求，客户端发送数据到服务器，当服务器没有返回响应之前，浏览器客户端可以正常干任何事情

Ajax运行原理，当浏览器客户端发出请求，会将请求发送给ajax引擎，ajax引擎再将请求发送给服务器，在这段时间内客户端可以做任意操作，直到服务器将数据返回给ajax引擎后，再执行设置的操作

json数据格式

两种数据格式：

对象格式：{"key1":obj,"key2":obj,"key3":obj...}

数组/集合格式：[obj,obj,obj...]

代码展示

json01.html

 <script language="JavaScript">
	var person={
			 "firstname":"张",
			 "lastname":"三丰",
			 "age":100
			 };
	 alert(person.firstname);
  </script>

　　

 

 

 json02

  <script language="JavaScript">

	 var java1127=[
	               {"uname":"公雪","age":21},
	               {"uname":"公雪2","age":21}
	               ];
  	alert(java1127[1].uname);
	 
  </script>

　　

 

 

 Json03

 <script language="JavaScript">

	 var school={
			 "java1127":[
			             {"name":"张三","age":21},
			             {"name":"李四","age":21}
			             ],
			 "java1128":[
				　　{"name":"王五","age":21},
				　　{"name":"赵六","age":21}
			             ]
	 };
	 alert(school.java1128[1].name);

  </script>

　　

 

 

 ajax技术要搭配json数据格式使用

三种ajax的操作

1、$.get(url, [data], [callback], [type])

2、$.post(url, [data], [callback], [type])

这两种的用法都是一样的只不过是一个get请求，一个post请求

url：代表请求的服务器端地址

data：代表请求服务器端的数据

callback：表示服务器端成功响应所触发的函数

type：表示服务器端返回的数据类型 常用的返回类型：text、json、html等

3、$.ajax( { option1:value1,option2:value2... } )

常用参数

async：是否异步，默认是true代表异步

data：发送到服务器的参数，建议使用json格式

dataType：服务器端返回的数据类型，常用text和json

success：成功响应执行的函数，对应的类型是function类型

type：请求方式，POST/GET

url：请求服务器端地址

在使用post请求或者ajax请求的时候，不用解决请求乱码，ajax就自动解决了，而get请求则需要解决get请求乱码

代码展示

demo01.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="button" value="get请求" onclick="get()">
<input type="button" value="post请求" onclick="post()">
<input type="button" value="ajax请求" onclick="ajax()">
<script type="text/javascript" src="${pageContext.request.contextPath }/jquery.min.js"></script>
<script type="text/javascript">
function get(){
	//get异步请求服务器
	$.get(
		"${pageContext.request.contextPath }/GetServlet",
		{"username":"张三"},
		function(data){
			alert(data.uname);
		},
		"json"
	);
}
function post(){
	//]post请求服务器
	$.post(
		"${pageContext.request.contextPath }/GetServlet",
		{"username":"李四"},
		function(data){
			alert(data.uname);
		},
		"json"
	);
}
function ajax(){
　　　　
	$.ajax({
		url:"${pageContext.request.contextPath }/GetServlet",
		data:{"username":"王五"},
		async:true,
		type:"post",
		success:function(data){
			alert(data.uname);
		},
		dataType:"json"
	});
}
</script>
</body>
</html>

　　GetServlet

package com.oracle.web;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class GetServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//获取参数
		String username=request.getParameter("username");
		//解决get请求乱码
		//username=new String(username.getBytes("ISO8859-1"),"UTF-8");
		
		System.out.println(username);
		//响应回去
		response.setContentType("text/html;charset=utf-8");
		response.getWriter().write("{\"uname\":\""+username+"\"}");
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}
}

　　

posted @ 2021-03-17 12:59  公雪  阅读(132)  评论(0)    收藏  举报