Ajax

最新推荐文章于 2025-03-16 10:00:00 发布

上后左爱

最新推荐文章于 2025-03-16 10:00:00 发布

阅读量173

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_27217017/article/details/72453543

本文详细介绍了Ajax请求的不同层次，包括$.ajax的基本用法、load()、$.get()、$.post()等函数的应用，并提供了示例代码。同时讲解了如何解决JSON响应中的中文乱码问题。

1.Ajax 是异步的JavaScript 客户端与服务器之间的异步通信方式

掌握：

第一层 ： $.ajax(...)最底层Ajax请求 编写最复杂

第二层：load()，$.get(),$.post()---客户端与服务器之间通信 通过回调函数 方式

第三层：$.getJson() 完成 js 跨域 ；$.getScript()进行动态加载

域名： 域名+端口+项目 ；js默认不能跨域

<!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>
	<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
	<script type="text/javascript">
		
		$(function(){
			$("input").click(function(){
				//0.1 请求路径
				var url = "/ee19_jquery_day02/SendDataServlet";
				//0.2 请求参数，采用json
				var params = {"username":"杰克", "password":"1234"};
				
				/* 1 load()函数 ，必须使用jquery对象
				 * * 格式：load(url, [data], [callback])
				 * 		参数1：url ，请求路径
				 * 		参数2：data，请求参数
				 * 		参数3：callback，回调函数
				 * * 如果没有请求参数，发送的GET请求
				 * * 如果有请求参数，发送的POST请求。请求没有中文乱码
				 * * 回调函数的参数
				 * 		参数1：data，响应数据。load()永远获得字符串，如果需要使用，必须手动转换json对象。
				$(this).load(url,params,function(data){
					//转换json对象
					var jsonData = eval("("+data+")");
					alert(jsonData.message);
				});
				 */
				
				/* 2 $.get() 全局函数，发送get请求
				 * * 格式：jQuery.get(url, [data], [callback], [type])
				 * 		* 参数4：type ，返回内容格式，xml, html, script, json, text, _default。
				 * * GET请求不适合发送中文数据，存放请求的中文乱码。
				 * 		必须手动解码   new String(username.getBytes("ISO-8859-1") ,"UTF-8")
				 * * 响应数据，如果使用  application/json;charset=UTF-8 ，jQuery自动将数据转换json对象。
				 * * 响应数据，如果使用  text/html;charset=UTF-8 ，回调函数获得字符串数据，需要手动转换。
				 * 		使用“参数4”，设置"json"，jQuery将字符串 转换成 json对象
				$.get(url,params,function(data){
					alert(data);
				},"json");
				 */
				
				/* 3 $.post() 全局函数，发送post请求
				 * * 格式：jQuery.post(url, [data], [callback], [type])
				$.post(url,params,function(data){
					alert(data);
				},"json")
				 */
				
				/* 4 $.ajax() 底层功能最强大的
				 * * 格式：jQuery.ajax([settings])
				 * 		参数settings：设置所有的参数
				 * 			url:发送请求的地址
				 * 			data:发送到服务器的数据,请求参数
				 * 			type:请求方式 ("POST" 或 "GET")， 
				 * 			success:成功的回调函数，success(data, textStatus, jqXHR)
				 * 			error:请求失败时调用此函数
				 * 			dataType:预期服务器返回的数据类型
				 * 				"xml": 返回 XML 文档，可用 jQuery 处理。
				 * 				"html": 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。
				 * 				"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。'''注意：'''在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
				 * 				"json": 返回 JSON 数据 。
				 * 				"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
				 * 				"text": 返回纯文本字符串
				 */
				
				$.ajax({
					"url":url,
					"data":params,
					"type":"POST",
					"success":function(data){
						alert(data);
					},
					"error":function(){
						alert("服务器繁忙，请稍后重试");
					},
					"dataType":"json"
				});
				
			});
		});
	</script>
	
</head>
<body>
	
	<input type="button" value="发送ajax" />
	
	
</body>
</html>

2.在服务器端手动写json数据时候转译\ 不要用‘’

对于服务器 发送给客户端的响应 数据有中文则会出现 数据乱码

解决 json 中文乱码 在Servlet 中设置response.setContextType(MIME);

response.setContextType("application/json;charset=UTF-8");

response.getWriter().print(jsonData);---在响应浏览器之前 设置内容显示的类型

package com.in.Servlet;

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

/**
 * Servlet implementation class SendDataServlet
 */
@WebServlet("/SendDataServlet")
public class SendDataServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public SendDataServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		// 1.获取请求方式
		String method=request.getMethod();
		System.out.println("发送请求方式"+method);
		//2.获取请求参数
		String username=request.getParameter("username");
		String password=request.getParameter("password");
		
		//3.生成 json数据 转译\ 不能使用''(畸形json)
		String jsonData = "{\"message\":\"成功了\"}";
		
		// 设置 响应中文乱码
		response.setContentType("application/json;charset=UTF-8");
		// 发送数据
		response.getWriter().print(jsonData);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}