利用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

原文地址:https://www.cnblogs.com/jiangu66/p/3155546.html