初识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 ...
随机推荐
- 简述一个javascript简单继承工具的实现原理
背景 由于本人非常希望能够开发自己的游戏,所以业余时间一直在想着能不能自己一些好玩又有趣的东西出来,最近随着steam上众多独立游戏的爆发,感觉自己又燃烧了起来,所以又拾起了很久以前的一个2d引擎,决 ...
- github的访问变慢了
以下个人观点:把操作系统的自主研究还有处理器自主研究列入重点,还有互联网上的种种动作,我发现里面似乎揭示了某些迹象,科研真的不应该以牺牲大部分人的河法全益为代价甚至目的.当某一天win不可能出现在出厂 ...
- BZOJ 1015 星球大战
Description 很久以前,在一个遥远的星系,一个黑暗的帝国靠着它的超级武器统治者整个星系.某一天,凭着一个偶然的机遇,一支反抗军摧毁了帝国的超级武器,并攻下了星系中几乎所有的星球.这些星球通过 ...
- VBA -excel --遍历行
Sub filter1()Rem MsgBox ("AAAAA")Rem 1 get selected zoneRem 2 loop rows and check columnRe ...
- Git skills in reseting files
How to uncommit files that were committed long time a ago?Note: Since all changes in the current wor ...
- Shredding Company(dfs)
Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 3519 Accepted: 2009 Description You h ...
- 福州大学 Problem 2169 shadow
http://acm.fzu.edu.cn/problem.php?pid=2169 思路:建立一个邻接表,利用搜索中回溯把走过的路标记为1,然后把这些标记为1的值全部加起来. Problem 216 ...
- Shapely介绍及用户手册
本文主要是基于shapely官方文档翻译而成 shapely主要是在笛卡尔平面对几何对象进行操作和分析. 性能 Shapely中所有的操作都是使用GEOS库.GEOS是用C++写的,也被用在许多应用程 ...
- iOS开发ARC入门和使用
本文引自:http://www.onevcat.com/2012/06/arc-hand-by-hand/ 英文原版:http://www.raywenderlich.com/5677/beginni ...
- 2012 A 《中国近现代史纲要》课程期末考试试卷
湖南人文科技学院2012—2013学年第1学期公共课 2011级<中国近现代史纲要>课程期末考试试卷 考核方式:(开卷) ...