jQuery--ajax

jQuery–ajax


ajax :异步请求,浏览器地址栏不改变,进行局部刷新。
ajax 流程分析
这里写图片描述

jQuery 的ajax
这里写图片描述

第一层: $.ajax(...) 最底层ajax请求,编写最复杂,完成功能最全的。
第二层:load() 、$.get() 、$.post() 开发中常用3个
第三层:$.getJSON() 、$.getScript() 高级开发
$.getJSON() 可以完成js“跨域”请求
域名:域名+端口+项目,js默认不能跨域请求。
$.getScript() 动态加载js文件。之前使用<script src="">加载页面时,一并加载js文件

回调函数参数
这里写图片描述

工具类,解析json

这里写图片描述

load()

//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);
                });

$.get()

/* 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");

$.post()

/* 3 $.post() 全局函数,发送post请求
                 * * 格式:jQuery.post(url, [data], [callback], [type])
                $.post(url,params,function(data){
                    alert(data);
                },"json")
                 */

$.ajax()

/* 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"
                });
<!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(){
                //请求的路径
                var url = "/javaee_jQuery_2/TestServlet"
                //请求的参数
                var params ={"username":"dly达达","password":"123"};

                /*
                load(url, [data], [callback])
                参数1:请求的服务器资源地址
                参数2:给请求的资源传递的参数
                参数3:当服务器返回响应数据时执行的回调函数
                不传参数使用的是get方式请求
                传参数,使用post方式请求,不会乱码

                回调函数的参数:第一个参数时用来接收服务器返回的数据
                                              第二个参数用来接收状态,success,error
                                              第三个参数接收一个对象,这个对象是ajax引擎 XHQ (XMLHttpRequest)
                使用load方法返回的都是json字符串

                $(this).load(url,params,function(data){
                    //alert(data);
                    //把json字符串转成对象
                    var obj = eval("("+data+")");
                    alert(obj.message);
                });
                */
                /*
                jQuery.get(url, [data], [callback], [type])
                get方式请求服务器
                response.setContentType("text/html;charset=utf-8");返回的是json字符串
                response.setContentType("text/json;charset=utf-8");返回的是json对象
                第四个参数:type:返回内容格式,xml, html, script, json, text, _default。

                $.get(url,params,function(data){
                    alert(data.message);
                },"json");

                $.post(url,params,function(data){
                    alert(data.message);
                },"json");
                */
                /*
                $.ajax(url,[settings]) 最底层的,功能最全的

                */
                jQuery.ajax({
                    "url":url,
                    "data":params,
                    "type":"POST",
                    "success":function(){alert("成功");},
                    "error":function(){alert("服务器忙");},
                    "dataType":"json"
                });


            });
        });
    </script>

</head>
<body>

    <input type="button" value="发送ajax" />

</body>
</html>
package javaee.web.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class TestServlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        //得到客户端请求方式
        String method = request.getMethod();
        System.out.println("***********"+method);
        //获取参数
        String name = request.getParameter("username");
        String pwd = request.getParameter("password");
        System.out.println(name+",,,"+pwd);

        //响应数据:json格式的
        String data = "{'message':'成功'}";//jQuery不支持,认为是畸形json数据
        //String data = "{\"message\":\"成功\"}";
        //json数据中有中文,处理乱码
        //response.setContentType("text/html;charset=utf-8");
        response.setContentType("text/json;charset=utf-8");
        response.getWriter().print(data);
    }


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

        doGet(request, response);

    }

}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值