JavaWEb之AJAX请求

JavaWEb之AJAX请求

什么是AJAX请求？
ajax是一种游览器通过js异步发起请求、局部更新页面的技术。

Ajax请求的局部更新，游览器地址栏不会发送变化。
局部更新不会舍弃原来页面的内容。

JQuery中的AJAX请求

$.ajax方法
url ：表示请求的地址

type：表示请求的类型GET或POST

data:表示发送给服务器的数据
格式有2种：
Ⅰ：key=value
Ⅱ：{key:value}

success：请求响应，响应的回调函数

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

使用样例如下：点击id为ajaxBtn的按钮时，跳转到服务器中路径名为url的Servlet程序中。该Servlet程序将一个Json字符串发送回浏览器，然后浏览器获取该Json字符串并转为Json对象保存在data中，然后打印在id为msg的

标签中。

// ajax请求
				$("#ajaxBtn").click(function(){
					
					$.ajax({
						url:"http://localhost:8090/16_json/ajaxServlet",
						data:"action=jQueryAjax",
						type:"GET",
						success:function(data){
							// var jsonObj = JSON.parse(data);
							$("#msg").html("姓名："+data.name+",年龄："+data.age);
						},
						dataType:"json"
					})
				});

protected void jQueryAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("JQueryAjax被调用了");
        Person person = new Person("user",10);
        Gson gson = new Gson();
        //json格式化字符串
        String personJsonStr = gson.toJson(person);
        resp.getWriter().write(personJsonStr);
    }

$.get方法和$.post方法

url ：表示请求的地址

data:表示发送给服务器的数据
格式有2种：
Ⅰ：key=value
Ⅱ：{key:value}

callback：成功的回调函数

type：返回的数据类型

$.get()使用如下

$("#getBtn").click(function () {

                $.get("http://localhost:8090/16_json/ajaxServlet", "action=jQueryGet", function (data) {
                    $("#msg").html("姓名：" + data.name + ",年龄：" + data.age);
                }, "json");
            });

$.post()方法如下

$("#postBtn").click(function () {

                $.post("http://localhost:8090/16_json/ajaxServlet", "action=jQueryPost", function (data) {
                    $("#msg").html("姓名：" + data.name + ",年龄：" + data.age);
                }, "json");
            });

$.getJSON方法

url ：表示请求的地址

data:表示发送给服务器的数据
格式有2种：
Ⅰ：key=value
Ⅱ：{key:value}

callback：成功的回调函数

serialize()方法

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

$("#submit").click(function () {
                // 把表单参数序列化,此时将表单信息通过参数发送给服务器
               $.getJSON("http://localhost:8090/16_json/ajaxServlet", "action=jQuerySerialize?"+$("#form01").serialize(),function (data){
                   $("#msg").html("姓名：" + data.name + ",年龄：" + data.age);
               });
            });