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 + "\n状态：" + 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.9的js框架导入，

在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 +"\nStatus: " + status);

});

});

});

</script>

</head>

<body>

<p>点击我</p>

</body>

</html>

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

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

利用jquery对ajax操作，详解原理（附代码）的更多相关文章

  1. 触碰jQuery：AJAX异步详解

    触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...

  2. 触碰jQuery：AJAX异步详解（转）

    AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和X ...

  3. jQuery调用AJAX异步详解[转]

    AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和X ...

  4. jQuery中 $.ajax()方法详解

    $.ajax()方法详解 jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为Strin ...

  5. Jquery使用ajax参数详解

    记录一下  Jquery使用ajax(post.get及参数详解) 1.get: $.ajax({ type: "GET", url: baseUrl + "Showco ...

  6. jQuery的DOM操作详解

    DOM(Document Object Model-文档对象模型):一种与浏览器, 平台, 语言无关的规则, 使用该接口可以轻松地访问页面中所有的标准组件DOM操作的分类 核心-DOM: DOM Co ...

  7. Jquery的AJAX应用详解

    案例一:取得服务端当前时间 简单形式:jQuery对象.load(url),返回结果自动添加到jQuery对象代表的标签中间 <body> 当前时间: <span id=" ...

  8. jquery datatable ajax配置详解

    我写的这个东西类似于个人笔记,如果你想要完整的而了解 可以去这里看看 http://dt.thxopen.com/ 包括英文原网站都不错. 通过配置ajax的属性和服务器交互 $("sele ...

  9. jQuery之$.ajax()方法详解及实例

    1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如 ...

随机推荐

  1. PHP单元测试利器：PHPUNIT初探

    开始动手安装phpunit 本文中将通过介绍php中的单元测试利器phpunit(http://phpunit.de/),并通过实际例子来讲解如何在实际工作中运用phpunit.首先安装phpunit ...

  2. DDD分层架构之领域实体（基础篇）

    DDD分层架构之领域实体(基础篇) 上一篇,我介绍了自己在DDD分层架构方面的一些感想,本文开始介绍领域层的实体,代码主要参考自<领域驱动设计C#2008实现>,另外参考了网上找到的一些示 ...

  3. [译]Java 设计模式之命令

    (文章翻译自Java Design Pattern: Command) 命令设计模式在进行执行和记录的时候需要一个操作及其参数和封装在一个对象里面.在下面的例子中,命令是一个操作,它的参数是一个Com ...

  4. leetcode第28题--Divide Two Integers

    Divide two integers without using multiplication, division and mod operator. 分析:题目意思很容易理解,就是不用乘除法和模运 ...

  5. ajax提交表单 验证

    function submitKH(mobileInputId,nameInputId) { var mobileInputSelector ='#'+ mobileInputId; var pass ...

  6. avalon.js实现一个简易日历

    使用MVVM框架avalon.js实现一个简易日历   最近在做公司内部的运营管理系统,因为与日历密切相关,同时无需触发条件直接显示在页面上,所以针对这样的功能场景,我就用avalon快速实现了一个简 ...

  7. JavaScript后台代码操作HTML TABLE的方法

    原文:JavaScript后台代码操作HTML TABLE的方法 var rowNum = 0,fileNum = 0; //行号与列号 var oNewRow; //定义插入行对象 var oNew ...

  8. SQL远程备份

    原文:SQL远程备份 set ANSI_NULLS ON set QUOTED_IDENTIFIER ON go   -- ====================================== ...

  9. [转] 关于 Eclipse 导出 Android项目 JavaDoc 详细过程

    关于Eclipse 导出JavaDoc过程中,遇到的问题 ,google 了一下 ,网友们 总说不一 ,最终 还是 搞定了 现在分享给大家 希望对大家有所帮助 用Eclipse默认的 JavaDoc需 ...

  10. .Net集成PayPal的Demo

    .Net集成PayPal的Demo 近来项目中需要使用Paypal(贝宝)支付,研究了一下接口,真是吐血,花了一个下午+一个晚上,屡败屡战,海淘了若干文档,终于尝试成功了,分享一下,希望对将要使用pa ...