利用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 + "\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操作,详解原理(附代码)的更多相关文章
- 触碰jQuery:AJAX异步详解
触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...
- 触碰jQuery:AJAX异步详解(转)
AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1) 使用CSS和X ...
- jQuery调用AJAX异步详解[转]
AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1) 使用CSS和X ...
- jQuery中 $.ajax()方法详解
$.ajax()方法详解 jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为Strin ...
- Jquery使用ajax参数详解
记录一下 Jquery使用ajax(post.get及参数详解) 1.get: $.ajax({ type: "GET", url: baseUrl + "Showco ...
- jQuery的DOM操作详解
DOM(Document Object Model-文档对象模型):一种与浏览器, 平台, 语言无关的规则, 使用该接口可以轻松地访问页面中所有的标准组件DOM操作的分类 核心-DOM: DOM Co ...
- Jquery的AJAX应用详解
案例一:取得服务端当前时间 简单形式:jQuery对象.load(url),返回结果自动添加到jQuery对象代表的标签中间 <body> 当前时间: <span id=" ...
- jquery datatable ajax配置详解
我写的这个东西类似于个人笔记,如果你想要完整的而了解 可以去这里看看 http://dt.thxopen.com/ 包括英文原网站都不错. 通过配置ajax的属性和服务器交互 $("sele ...
- jQuery之$.ajax()方法详解及实例
1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如 ...
随机推荐
- 【hoj】2651 pie 二分查找
二分查找是一个非常主要的算法,针对的是有序的数列,通过中间值的大小来推断接下来查找的是左半段还是右半段,直到中间值的大小等于要找到的数时或者中间值满足一定的条件就返回,所以当有些问题要求在一定范围内找 ...
- EA强大的绘图工具---设计数据库表格
关于EA这个优秀的软件是从师哥哪里听来的,自己瞎点了点,感觉也没什么.近期和和智福加上一个师哥合作敲机房收费系统时,想到之前听人说EA非常强大,便随便找了找关于EA使用的帮助手冊.果然惊喜-- 如题, ...
- Java 之复合赋值运算符
1.引入问题 切入正题,看下面代码,结果应该是怎么样的 public class App{ public static void main( String[] args ){ byte a=1 ; i ...
- web中国的数据分析过程
1 获得web原始数据 2 确定数据编码 例如:是不是url编码或base64编码 3 如果有必要的解码编码 4 确定原始数据和本地字符集显示字符集 5 字符集转换 6 显示 版权声明:本文博客原创文 ...
- placeholder 属性的支持
placeholder 是HTML5的. 在IE6-8中不能使用.可以使用 JQ 来设置. 给input一个value, JQ判断得到焦点时 value="": 移开焦点时,若 ...
- SQL Server 2005中设置Reporting Services发布web报表的匿名访问
原文:SQL Server 2005中设置Reporting Services发布web报表的匿名访问 一位朋友提出个问题:集成到SQL Server 2005中的Reporting Services ...
- leetcode[91] Subsets II
给定一个数组,返回所有的非重复的可能.例如给定 If S = [1,2,2], a solution is: [ [2], [1], [1,2,2], [2,2], [1,2], [] ] 其实这题类 ...
- delphi字符串函数大全
转帖:delphi字符串函数大全 2009-11-17 16:43:55 分类: delphi字符串函数大全 ━━━━━━━━━━━━━━━━━━━━━首部 function StringToGUID ...
- 在PHP中连接数据库时获取最后的一个ID
在SQL中获取最后的一个id 只需要加上where条件对id进行排序就可以了 但是在PHP中 有一种最新的方法 使用mysql_insert_id();就可以获得最大的id .
- python 调用shell命令的方法
在python程序中调用shell命令,是件很酷且常用的事情…… 1. os.system(command) 此函数会启动子进程,在子进程中执行command,并返回command命令执行完毕后的退出 ...