• 利用jquery对ajax操作,详解原理(附代码)


    1. jQuery load() 方法

    jQuery load() 方法是简单但强大的 AJAX 方法。

    load() 方法从服务器加载数据,并把返回的数据放入被选元素中。

    语法:

    $(selector).load(URL,data,callback);

    必需的 URL 参数规定您希望加载的 URL

    可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。//这个就是往服务器传数据的

    可选的 callback 参数是 load() 方法完成后所执行的函数名称。//

     

    下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容,加载到指定的 <div> 元素中:

    实例

    $("#div1").load("demo_test.txt #p1");

     

    2. jQuery get() post() 方法用于通过 HTTP GET POST 请求从服务器请求数据。

     

    首先要了解什么是 HTTP

    超文本传输协议(HTTP)的设计目的是保证客户机与服务器之间的通信。

    HTTP 的工作方式是客户机与服务器之间的请求-应答协议。

    Web 浏览器可能是客户端,而计算机上的网络应用程序也可能作为服务器端。

    举例:客户端(浏览器)向服务器提交 HTTP请求;服务器向客户端返回响应。响应包含关于请求的状态信息以及可能被请求的内容。

    还有get()和post()的区别

    ·  GET 请求可被缓存

    ·  GET 请求保留在浏览器历史记录中

    ·  GET 请求可被收藏为书签

    ·  GET 请求不应在处理敏感数据时使用

    ·  GET 请求有长度限制

    ·  GET 请求只应当用于取回数据

    ·  POST 请求不会被缓存

    ·  POST 请求不会保留在浏览器历史记录中

    ·  POST 不能被收藏为书签

    ·  POST 请求对数据长度没有要求

     

    GET

    POST

    后退按钮/刷新

    无害

    数据会被重新提交(浏览器应该告知用户数据会被重新提交)。

    书签

    可收藏为书签

    不可收藏为书签

    缓存

    能被缓存

    不能缓存

    编码类型

    application/x-www-form-urlencoded

    application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。

    历史

    参数保留在浏览器历史中。

    参数不会保存在浏览器历史中。

    对数据长度的限制

    是的。当发送数据时,GET 方法向 URL 添加数据;URL 的长度是受限制的(URL 的最大长度是 2048 个字符)。

    无限制。

    对数据类型的限制

    只允许 ASCII 字符。

    没有限制。也允许二进制数据。

    安全性

    与 POST 相比,GET 的安全性较差,因为所发送的数据是 URL 的一部分。

    在发送密码或其他敏感信息时绝不要使用 GET !

    POST 比 GET 更安全,因为参数不会被保存在浏览器历史或 web 服务器日志中。

    可见性

    数据在 URL 中对所有人都是可见的。

    数据不会显示在 URL 中。

     

     

     

    例子get

    <script>

    $(document).ready(function(){

      $("button").click(function(){

        $.get("/example/jquery/demo_test.asp",function(data,status){

          alert("数据:" + data + " 状态:" + status);

        });

      });

    });

    </script>

     

     

    <%
    response.write("This is some text from an external ASP file.")
    %>

    结果会出来:

    "数据:This is some text from an external ASP file.  状态:success

     

    Post例子:

    就用servlet吧。

    第一个是MyServlet.Java

    package com.fish;

     

    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 MyServlet extends HttpServlet {

     

           public void doPost(HttpServletRequest request, HttpServletResponse response)

                         throws ServletException, IOException {

     

          

          

                  PrintWriter out = response.getWriter();

                  System.out.println(request.getParameter("name"));//这个等会从juqery里面获取

                  System.out.println(request.getParameter("text"));

                  out.print("aa");

                  out.print("bb");

                  //

           }

     

    }

     

    然后将1.9js框架导入,

    jsp这么写

    <%@ page language="java"import="java.util.*"pageEncoding="utf-8"%>

    <%

        String path = request.getContextPath();

        String basePath = request.getScheme() +"://"

                + request.getServerName() +":" + request.getServerPort()

                + path + "/";

    %>

     

    <!DOCTYPEHTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    <html>

    <head>

    <basehref="<%=basePath%>">

     

    <title>My JSP 'MyJsp.jsp' starting page</title>

    <scripttype="text/javascript"src="jquery-1.9.1.js"></script>//放入js框架

    <scripttype="text/javascript">

        $(document).ready(function() {

            $("p").click(function() {

                $.post("servlet/MyServlet",         //这个是MyServlet的路径

      {

        name:"你好",                                //第二个是以json格式的传值,和上面servet的名相同,这样就可以传到服务器。

        text:"我是千岛飞鱼"

      },

      function(data,status){                   //从服务器读的内容会在data里面。Status这个读取的状态

        alert("Data: " + data +" Status: " + status);

      });

               

            });

        });

    </script>

     

    </head>

     

    <body>

        <p>点击我</p>

    </body>

    </html>

     

     

    所以结果在eclispe控制台会显示:你好我是千岛飞鱼。

    在浏览器会弹出:Data:aabb   Status:sucess

  • 相关阅读:
    2020.4.10个人总结
    CG-CTF simple machine
    CG-CTF Our 16bit wars
    CG-CTF Our 16bit Games
    CG-CTF single
    CG-CTF WxyVM2
    Go Channel 详解
    Go语言TCP Socket编程
    golang mysql demo
    YouCompleteMe unavailable: requires Vim compiled with Python 2.x support
  • 原文地址:https://www.cnblogs.com/jiangu66/p/3155546.html
Copyright © 2020-2023  润新知