利用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请求方法,例如 ...
随机推荐
- Thrift实践
Thrift实践:(一)安装 -- 未完待续 1. 新建一个目录,C:\test\thrift-test,里面建2个子文件夹,client-node和sever-csharp,然后把Thrift官 ...
- HBuilder CSS 自定义代码块
=begin 本文档是CSS代码块的编辑文件.注意不要把其他语言的设置放到css里来. HBuilder可使用ruby脚本来编辑代码块和增强操作命令. 1.编辑代码块 如果要新增一个代码块,复制如下一 ...
- 学习使用简单的php
配置文件在:/etc/php5/$中,不同的模式含有自己的php.ini配置文件.php可以运行于多种模式:cgi.fastcgi.cli.web模块模式等4种: 我现在使用的模式是cli模式,这里进 ...
- Linux下防火墙设置
Linux下开启/关闭防火墙命令 1) 永久性生效,重启后不会复原 开启:chkconfigiptables on 关闭:chkconfigiptables off 2) 即时生效,重启后复原 开启 ...
- 使用Windows2003的IIS发布网站 - 进阶者系列 - 学习者系列文章
本系列文章目录:http://www.cnblogs.com/lzhdim/category/277150.html Windows 2003是一款不错的Windows服务器版本.在刚工作的前些年里, ...
- 零基础学习iOS开发
零基础学习iOS开发不管你是否涉足过IT领域,只要你对iOS开发感兴趣,都可以阅读此专题. [零基础学习iOS开发][02-C语言]11-函数的声明和定义 摘要: 在上一讲中,简单介绍了函数的定义和使 ...
- 【Android中Broadcast Receiver组件具体解释
】
BroadcastReceiver(广播接收器)是Android中的四大组件之中的一个. 以下是Android Doc中关于BroadcastReceiver的概述: ①广播接收器是一个专注于接收广播 ...
- MVC Bootstrap极速开发框架
ASP.NET MVC Bootstrap极速开发框架 前言 每次新开发项目都要从头开始设计?有木有一个通用的快速开发框架?并且得是ASP.NET MVC And Bootstrap?数据库不要手工 ...
- Tomcat过滤器模拟
直接上代码Filter.java public interface Filter { //过滤器 public void doFilter(Request request,Response respo ...
- 一个小团队TDD游戏及实践
介绍的这个游戏是自己根据目前带的团队的实际情况来制定的, 在游戏实践过程中,收到了较好的效果,故打算把这个游戏分享出来,一是分享一下实践,而是集思广益,不断完善,更好的利用游戏来锻炼队伍.下面就将游戏 ...