总结-javascript-ajax
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/jquery.form.js"></script>
<script type="text/javascript">
$(function() {
// load方法：向服务器发送异步请求，并且将服务器返回的数据直接添加到符合要求的节点之上。
$('#btn1').click(function() {
// load方法如果没有请求参数，会发送get请求，如果有请求参数，则会发送post请求。当不需要传参的时候，发送get请求就方便了。
// 也可以这样的参数形式：name=llj&age=55
$('#tips').load('/ace/ajax.servlet', {
username : $('#username').val()
});
});
// $.get()方法
$('#btn2').click(function() {
$.get('/ace/ajax.servlet', {
username : $('#username').val()
}, function(data, statusText) {
$('#tips').html(data);
}, 'text');
// 最后一个参数：服务器返回的数据类型，可以是:
// text : 普通的文本
// html : html文档
// json : json字符串
// xml : xml文档
// script: javascript脚本
});
// $.post()方法
$('#btn3').click(function() {
$.post('/ace/ajax.servlet', {
username : $('#username').val()
}, function(data, statusText) {
$('#tips').html(data);
}, 'text');
});
// $.ajax()方法
$('#btn4').click(function() {
$.ajax({
url : '/ace/ajax.servlet', // js中，属性可以不用 ' ' JSON里面必须要 ' '
type : 'get', // 默认是get方式
data : 'username=' + $('#username').val(),
dataType : 'text',
success : function(data) {
$('#tips').html(data);
},
error : function() {
alert('ERROR!');
},
async : true // async: 当值为true(缺省值)，表示发送异步请求。当值为false,表示发送同步请求。
});
});
// $.getJSON
$('#btn5').click(function() {
$.getJSON('/ace/ajax.servlet?act=1', {}, function(data) {
alert(data);
});
});
// $.ajax()方法对keyup事件的应用
$('#username').keyup(function() {
$.ajax({
url : '/ace/ajax.servlet',
type : 'get',
data : 'username=' + $('#username').val(),
dataType : 'text',
success : function(data) {
$('#tips').html(data);
},
error : function() {
alert('ERROR!');
},
async : true
});
});
// $.ajax()方法对input(propertychange)事件的应用
var event = 'input'; // 非IE浏览器 - input事件
if (window.navigator.userAgent.indexOf('MSIE') != -1) {
event = 'propertychange'; // IE浏览器 - propertychange事件
}
$('#username2').bind(event, fn);
function fn() {
$.ajax({
url : '/ace/ajax.servlet',
data : 'username=' + $('#username2').val(),
success : function(data) {
$('#tips').html(data);
}
});
}
});
</script>
<script type="text/javascript">
/**
* 获取AJAX对象 <br>
* AJAX：asynchronous javascript and xml <br>
* ajax是一种用来改善用户体验的技术，其实质是利用浏览器内置的一个特殊的对象(XMLHttpRequest对象，<br>
* 一般称之为ajax对象)异步地(当ajax对象发请求时，浏览器不会销毁当前页面，用户仍然可以对当前页面做其它的操作)向服务器发请求，<br>
* 服务器送回部分数据( 并不是一个完整的页面)，利用这些数据更新当前页面。整个过程，页面无刷新，不打断用户的操作。<br>
*/
function getXhr() {
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest(); // 非IE浏览器
} else {
xhr = new ActiveXObject("Microsoft.XMLHttp"); // IE浏览器
}
return xhr;
}
function xhrExample() {
function post() {
var xhr = getXhr();
xhr.open('post', 'test.servlet', 'true');
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); // 消息头
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
var txt = xhr.responseText;
}
};
xhr.send("time=" + mf("timer").innerHTML);
}
function get() {
var xhr = getXhr();
xhr.open('GET', 'test.servlet?actionMethod=GET', 'true');
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
var txt = xhr.responseText;
}
};
xhr.send(null);
}
}
/**
* ajax提交表单的两种方法
*/
function func1() {
$.ajax({
url : 'test.servlet',
type : 'post',
data : $('#form').serialize(),
dataType : 'text',
success : function(data) {
},
error : function() {
}
});
}
// 需要jquery.form.js
function func2() {
var options = {
url : 'test.servlet',
type : 'post',
data : null,
success : function(data) {
}
};
var form = $("#form");// form1:表单ID 在表单界面只用这一个表单ID
form.ajaxSubmit(options);
}
</script>
</head>
<body>
<h3>jQuery对AJAX的支持演示 -- load、$.get()、$.post()、$.ajax()</h3>
<form>
用户名1： <input id="username" /> keyup事件 <span id="tips" style="font-size: 32pt; color: cyan;"></span>
<br>
<br>
用户名2： <input id="username2" /> input(propertychange)事件
<br>
<br>
<input type="button" value="click me(load)" id="btn1" />
<input type="button" value="click me($get)" id="btn2" />
<input type="button" value="click me($post)" id="btn3" />
<input type="button" value="click me($.ajax)" id="btn4" />
<input type="button" value="click me($.getJSON)" id="btn5" />
<br>
</form>
</body>
</html>
总结-javascript-ajax的更多相关文章
- JavaScript Ajax之美~
JavaScript Ajax之美~ 曾经有一段时期,因为开发人员对JavaScript的滥用导致其遭受了一段时间的冷门时期,不被大家看好,后来,到了2005年,Google公司的很多技术都是用了aj ...
- ajax 跨域 headers JavaScript ajax 跨域请求 +设置headers 实践
解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现. 此处手札 供后人参 ...
- 2、.net NVelocity中原生javascript ajax封装使用
在页面上,我们经常会遇到局部刷新的例子,这个时候,就需要用到ajax, 因为很多代码都是公用的,所以我们想到了,将代码封装,简化了使用,减少了冗余 javascript ajax代码如下: var x ...
- javascript ajax 脚本跨域调用全解析
javascript ajax 脚本跨域调用全解析 今天终于有点时间研究了一下javsscript ajax 脚本跨域调用的问题,先在网上随便搜了一下找到一些解决的办法,但是都比较复杂.由是转到jqu ...
- 【转】ajax 跨域 headers JavaScript ajax 跨域请求 +设置headers 实践
解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现. 此处手札 供后人参 ...
- 7 款基于 JavaScript/AJAX 的文件上传插件
本文整理了7款基于JavaScript和AJAX的文件上传插件,这些插件基本上都能实现以下功能: 多文件上传 拖拽操作 实时上传进度 自定义上传限制 希望能为你的开发工作带来帮助. 1. jQuer ...
- [转载]javascript+ajax+jquery教程11--正则表达式
原文地址:javascript+ajax+jquery教程11--正则表达式作者:morflame 正则表达式可以: 测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个 ...
- JavaScript AJAX原生写法
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- 非常优秀的Javascript(AJAX) 开发工具：Aptana
非常优秀的Javascript(AJAX) 开发工具:Aptana 下面我要向你介绍一款非常优秀的Javascript(AJAX) 开发工具:Aptana.应为它实在太棒了,所以我忍不住想向你推荐它. ...
- javascript --- Ajax基础
神马是Ajax? Ajax即‘Asynchronous javascript and XML’(异步javascript和XML),也就是所谓的无刷新页面读取技术. http请求 首先要了解http请 ...
随机推荐
- Types of CQRS
Types of CQRS By Vladimir Khorikov CQRS is a pretty defined concept. Often, people say that you eith ...
- java23
1:多线程(理解) (1)多线程:一个应用程序有多条执行路径 进程:正在执行的应用程序 线程:进程的执行单元,执行路径 单线程:一个应用程序只有一条执行 ...
- monkeyrunner API接口文档内容
用python编写脚本 1.导入模块: MonkeyRunner MonkeyDevice MonkeyImage ps:如果给导入模块起别名,就应该使用别名,而不能使用原名,否则会出现错误. f ...
- ABAP 合并单元格自建函数
FORM frm_merge_cells USING sor_cell tar_cell. CALL METHOD OF excel 'Range' = range EXPORTING ...
- yii2.0的分页和排序
//排序 $sort = new Sort([ 'attributes' => [ 'age' => [ 'asc' => ['age' => SORT_ASC], 'desc ...
- AJAX里，使用XML返回数据类型，实现简单下拉列表
XML:可扩展标记语言 HTML:超文本标记语言 标签:<标签名></标签名> 特点: 1.必须要有一个根 2.标签名自定义 3.对大小写敏感 4.有开始就要有结束 5.同一级 ...
- 根据字符长度动态确定UIlabel宽高
iOS7中用以下方法 - (CGSize)sizeWithAttributes:(NSDictionary *)attrs; 替代过时的iOS6中的- (CGSize)sizeWithFont:(UI ...
- Lamp搭建bugfree
1.下载bugfree安装包 2.将bugfree安装包解压到/home/wwwroot/default目录下 unzip bugfree.zip -d /home/wwwroot/default/ ...
- 2.oracle 12c 创建-访问-关闭-删除PDB
1.创建PDB SQL> select name from v$datafile; NAME ------------------------------------------------ ...
- Memcached vs Redis
Memcached和Redis哪一个能有更好的表现? Redis可以看作是Memcached的超集,这让Redis不仅仅可以用来当缓存,也可以作为实际的数据存储. 强大的数据结构以及操作命令. 默认持 ...