初识Ajax技术
| 属性名称 |
说明
|
|
readyState
|
返回请求的当前状态
常用值：
0——未初始化
1——开始发送请求
2——请求发送完成
3——开始读取相应
4——读取响应结束
|
|
status
|
HTTP相应状态码：
200——相应正常
400——错误请求，如语法错误
403——没有访问权限
404——资源不存在
500——服务器内部错误
|
|
responseText
|
以文本形式获取相应值
|
|
responseXML
|
以XML形式获取相应值，并且解析成DOM对象返回
|
| statusText |
返回当前请求的相应行状态
|
| onreadystatechange |
设置回调函数
|
|
方法
|
说明
|
|
open(String method,String url,boolean async,String user,String password)
|
用于创建一个新的HTTP请求 参数method：设置HTTP请求方法，如POST、GET等，不区分大小写 参数url:请求的url地址（如果是get请求，参数在这里拼接） 参数async：可选，指定此请求是否为异步方法，默认为true 参数user：可选，如果服务器需要验证，此处指定用户名，否则弹出验证窗口 参数password：可选，验证中的密码 |
|
send(String data)
|
发送请求到服务器端
参数data：字符串类型，通过此请求发送的数据。POST方式需要指定，GET方式则不指定
|
|
abort()
|
取消当前请求
|
|
setRequestHeader(String header,String value)
|
单独设置请求的某个HTTP头信息 参数header：要指定的HTTP头名称 参数value：要指定的HTTP头名称所对应的值 常用的：setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8") |
|
getResponseHeader(String header)
|
从响应中获取指定的HTTP头信息
参数header：要获取指定的HTTP头
|
|
getAllResponseHeaders()
|
获取相应的所有的HTTP头信息 |
request.setCharacterEncoding("utf-8");
response.setHeader("content-Type", "text/html;charset=utf-8");
// 读取参数
String mail = request.getParameter("mail");
System.out.println("debug:mail:" + mail);
String result = "false";
if (mail.equalsIgnoreCase("qq")) {
result = "true";
}
// 输出结果
PrintWriter out = response.getWriter();
out.print(result);
out.flush();
/**
* 创建xmlHttpRequest对象
*
* 兼容版本
*
* 开发时间：2016-5-18 上午10:00:49
* @author MrFalse
*/
function createXMLHttpRequest(){
// 定义变量
var request=null;
if(window.XMLHttpRequest){
request=new XMLHttpRequest();
}else{
// 兼容早期IE5、IE6浏览器
request=new ActiveXObject("Microsoft.XMLHTTP");
}
return request;
}
/**
* 验证邮箱
*
*
* 开发时间：2016-5-18 上午10:05:07
* @author MrFalse
* @param oInput
*/
function checkUserName(oInput){
// 读取输入框的的值
var strUserName=oInput.value;
if(strUserName==null||strUserName==""){
userNameMessage.innerHTML="邮箱不能为空";
return;
}
// 创建XMLHttpRequest对象
var xmlHttpRequest=createXMLHttpRequest();
// 设置回调函数
xmlHttpRequest.onreadystatechange=function(){
if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
var strReturnString=xmlHttpRequest.responseText;
if(strReturnString.indexOf("true")>=0){
userNameMessage.innerHTML="用户名已经被占用";
userNameMessage.className="red";
}else{
userNameMessage.innerHTML="用户名可以使用";
userNameMessage.className="blue";
}
}
}
var url="RegisterServlet";
xmlHttpRequest.open("post",url,true);
// 设置头信息
xmlHttpRequest.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded;charset=utf-8");
// 参数数据,使用key=value&key=value……的方式
var urlParam="mail="+strUserName;
//发送请求
xmlHttpRequest.send(urlParam);
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>注册页面</title>
<script type="text/javascript" src="register.js"></script>
<style type="text/css"> .blue{
color: blue;
font-weight: normal;
} .red{
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<form action="">
<p>注册邮箱：<input type="text" onblur="checkUserName(this);"/>*<span id="userNameMessage"></span></p>
</form>
</body>
</html>
$.ajax() 综合的请求，比较强大，功能较全，但是复杂$.get() get方式请求，但是带参数时转为post请求
$.post() post方式请求$.getJSON() 获取服务器返回的json数据$(selecter).load() 将服务器返回的数据加载到选择器选中的内容中
使用$.ajax()
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ajax请求jquery</title>
</head>
<body>
<form action="">
<p><input type="text" name="email" id="email" onblur="requestxx(this);"/>
<span id="prompt">*</span>
</p>
</form>
</body>
</script>
</html>
<!-- 导入jquery库 -->
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
function requestxx(thisobj){
//对中文进行uri编码
email=encodeURI(thisobj.value);
$.ajax({
url:"RegisterServlet",
type:"get",
data:"mail="+email,
//执行成功的回调函数
success:function(result,textStatus){
if(result.indexOf("true")>=0){
$("#prompt").text("用户名已经被占用");
}else{
$("#prompt").text("用户名可以使用");
}
},
//执行失败或错误的回调函数
error:function(){
alert("ajax执行失败");
}
});
}
</script>
使用$.get()
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
function check(input){
$.get("RegisterServlet","mail="+input.value,function(result){
if(result.indexOf("true")>=0){
$("#prompt").text("用户名已经被占用");
}else{
$("#prompt").text("用户名可以使用");
}
});
}
</script>
使用$.post()
jq_3
<script type="text/javascript">
function check(input){
$.post("RegisterServlet","mail="+input.value,function(result){
if(result.indexOf("true")>=0){
$("#prompt").text("用户名已经被占用");
}else{
$("#prompt").text("用户名可以使用");
}
});
}
</script>
使用$.getJSON()
request.setCharacterEncoding("utf-8");
//两种响应头都可以使用
response.setHeader("Content-Type", "application/json;charset=utf-8");
//response.setHeader("content-Type", "text/html;charset=utf-8");
PrintWriter out=response.getWriter();
//返回的json格式必须是严格的json格式，否则浏览器无法调用
out.print("{\"name\":\"张三\"}");
out.flush();
<button onclick="clickTest()">提交</button>
<script type="text/javascript">
function clickTest() {
$.getJSON("ResponseJSON",function(data) {
alert(data.name);
})
}
</script>
使用$(selecter).load()
<script type="text/javascript">
function check(input){
$("#prompt").load("RegisterServlet","mail="+input.value);
}
</script>
- 一定要注意JSON字符串的书写格式，如果传入的字符串不是JSON格式，如果传入的字符串不是JSON格式或者格式错误，将不能得到正确的值。
- 使用$.getJSON()方法时，默认从服务器接收到的数据就是JSON对象，不需要再使用$.parseJSON()方法去解析即可使用
$.parseJSON(str)的使用
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jqueryParseJSON</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
function test() {
//json的字符串
var jsonStr = '{"name":"张三","age":20}';
//解析成json对象
var jsonObj = $.parseJSON(jsonStr);
alert("name:" + jsonObj.name + "age:" + jsonObj.age);
}
</script>
</head>
<body>
<button onclick="test()">测试</button>
</body>
</html>
result:
初识Ajax技术的更多相关文章
- ajax技术初识与应用
一.ajax技术初识 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术.Ajax不是一种新的编 ...
- 使用ajax技术实现txt弹出在页面上
使用ajax技术实现txt弹出在页面上 使用ajax技术实现点击按钮,将TXT文本里的内容通过弹出框显示到页面上 /*事件会在页面加载完成后触发.*/ <script> window. ...
- Django补充及初识Ajax
Django创建一对多表结构 首先现在models.py中写如下代码: from django.db import models # Create your models here. class Bu ...
- 《所用到的AJAX技术基础》
来自百度网页,w3cshool网页:AJAX = Asychronous JavaScript and XML,翻译成中文为:异步的JavaScript XML. 异步的意思就是不重新加载整个页面,后 ...
- Ajax技术
1.ajax技术的背景 不可否认,ajax技术的流行得益于google的大力推广,正是由于google earth.google suggest以及gmail等对ajax技术的广泛应用,催生了ajax ...
- Ajax技术详解
Ajax技术:Ajax描述了一种主要使用脚本(JS)操纵HTTP的web应用架构,它的主要特点是使用脚本操纵HTTP和web服务器进行数据交换,不会导致页面重载.Ajax的核心是JS的XMLHttpR ...
- Java之Ajax技术
ajax(asynchronouse javascript and xml) 异步的javascript 和 xml(现在常把xml换成json): ajax是2005年提出的,在2006,2007年 ...
- 在 PHP 中结合 Ajax 技术进行图片上传
前面几则日志中讲述了在 PHP 中上传文件,相信大家对 PHP 中如何进行文件上传已经初步掌握.本文来继续探讨在 PHP 中上传文件的技术,不同的是,本次上传将仅限于图片文件的上传,并且将采用 Aja ...
- ajax 技术和原理分析
ajax所包含的技术 大家都知道ajax并非一种新的技术,而是几种原有技术的结合体.它由下列技术组合而成. 1.使用CSS和XHTML来表示. 2. 使用DOM模型来交互和动态显示. 3.使用XMLH ...
随机推荐
- BAE 环境下配置 struts2 + spring + hibernate（SSH）（三）spring&hibernate
1.在lib中加入必要的包,导入后结果如下: lib打包下载:SSH-lib.jar (struts2.3.1.2 spring3.0.5 hibernate3.6.10.Final) 只包含必要 ...
- shell笔记（基本知识）
一.编写第一个shell程序 实例1: [程序] #!/bin/sh echo "hello word !" [运行]
- 工作总结：MFC自写排序算法（升序）
最近一个需求里面需要实IP升序排序,用了qsort,结果是内部排序,甚至感觉排序结果不可预测性,于是自己写了一个外部排序. 需求如下:一个指针里面有N条记录,每条记录包含:IP,偏移地址,保留位,均占 ...
- Nah Lock: 一个无锁的内存分配器
概述 我实现了两个完全无锁的内存分配器:_nalloc 和 nalloc. 我用benchmark工具对它们进行了一组综合性测试,并比较了它们的指标值. 与libc(glibc malloc)相比, ...
- javascript design patterns
http://jsdesignpatterns.com/ http://www.joezimjs.com/tag/design-patterns/ http://codecube.net/#archi ...
- 用expect实现自动输入SSH的SCP信息，且不需要另外的文件
#!/bin/sh ] ; then echo "USAGE: $0 remote_ip serverXXXXX" echo " e.g.: $0 1.2.3.4 ser ...
- JVM上的随机数与熵池策略
在apache-tomcat官方文档:如何让tomcat启动更快里面提到了一些启动时的优化项,其中一项是关于随机数生成时,采用的“熵源”(entropy source)的策略. 他提到tomcat7的 ...
- 【HDOJ】2333 Assemble
二分+贪心策略.其中注释处很重要. #include <iostream> #include <cstdio> #include <cstring> #includ ...
- 如何在不影响数据库的正常使用的情况下得到数据的完整.mdf和.ldf文
一:完整备份数据库 二:还原数据库 四:分离数据库即可得到.mdf和.ldf文件
- ZOJ 3675 Trim the Nails
http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=4918 DP+状态压缩. http://www.cnblogs.com/dgsr ...