阿贾克斯（AJAX）
AJAX ：Asynchronous JavaScript and XML 异步的javascript 和xml
优点 ： 在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分数据
不需要任何的浏览器插件，但需要用户允许javascript在浏览器上执行
应用：运用XHTML+CSS来表达资讯 javascript操作DOM（Document Object Model）
XMLHttpRequest是ajax的基础
现代浏览器（IE7、FIREFOX、CHROME、safari 还有Opera）旧代（IE5、IE6）
语法不同 ：variable = new XMLHttpRequest();
Variable = new ActiveXObject(“Microsoft.XMLHTTP”);
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
向服务器发送请求： XMLHttpRequest对象的open（） send（）方法
xmlhttp.open(method, url, async):method--get或者post类型
Url --文件在服务器上的位置
Async：boolean值 true （异步） false 同步
xmlhttp. Send(String) :String ---post请求
Get方法更简单方便 post：无法使用缓存文件、发送大量数据
例子：get：xmlhttp.open(“get” , “demo_get.html” , true);
xmlhttp.send();
Post: xmlhttp.open(“post” , “demo_post.html” , true);
xmlhttp.setRequestHeader(“content-type” ,“application/x-www-form-urlencoded”);
//向请求添加HTTP头 header 头的名称 value 值
xmlhttp.send(“fname = Bill & lname = gates”);
Async = true ： 请规定在响应处于onreadystatechange 时间中 的就绪状态
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
document.getElementById(“muDiv”).innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open(“get” , “test.txt” , true);
xmlhttp.send();
服务器响应： XMLHttpRequest对象的responseText 或者 responseXML
字符串响应数据 XML形式响应
每当readystate改变的时候，就会触发onreadystatechange事件
Readystate存有XMLHttpRequest的状态 0-4
0： 请求未初始化 1：服务器连接已建立
2：请求已接受 3：请求处理中 4：请求已完成，且响应已就绪
Status： 200 “OK” ； 404： 未找到页面
例子：
function showHint(str)
{
var xmlhttp;
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gethint.asp?q="+str,true);
xmlhttp.send();
}
代码解释： 如果输入框为空 length==0 清空txthint占位符的内容，并退出函数
如果不为空，执行任务：
创建XMLHttpRequest对象 ，当服务器响应就绪时执行函数
把请求发送到服务器上的文件， 注：url中带有个参数q
例子：简化版
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript">
window.onload=function() {
document.getElementById("username").onblur=function() {
sendAjax("POST", "register.sxt", "username="+this.value, function(result) {
// 向span中显示信息
if(result == "yes") {
document.getElementById("uspan").innerHTML="√";
} else {
document.getElementById("uspan").innerHTML="×";
}
});
};
};
</script>
</head>
<body>
<input type="text" name="username" id="username" /><span id="uspan"></span>
</body>
</html>
Js
function sendAjax(method, url, body, success) {// 钩子函数, 回调函数
var xmlHttp;
if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200 || xmlHttp.status == 304) {
// 成功时调用函数
success(xmlHttp.responseText);
}
}
};
xmlHttp.open(method, url);
if(method == "POST") {
// 设置请求头信息, 表示提交数据时按照表单的方式提交
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
}
xmlHttp.send(body);
}
如果加了数据库内容：
@WebServlet("/register.sxt")
public class RegisterServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String username = req.getParameter("username");
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
String sql = "select count(*) from users where username=?";
try {
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/test401", "root", "root");
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, username);
rs = pstmt.executeQuery();
if(rs.next()) {
if(rs.getInt(1)>0) {
resp.getWriter().print("no");
} else {
resp.getWriter().print("yes");
}
}
} catch (Exception e) {
e.printStackTrace();
} finally {
try {
rs.close();
pstmt.close();
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
}
阿贾克斯（AJAX）的更多相关文章
- AJAX（一、基本知识）
AJAX:Asynchronous ([ə'sɪŋkrənəs; eɪ-])Javascript (['dʒɑ:və,skrɪpt])and XML 异步的Javascript和XMLAJAX不是新的 ...
- jQuery Datetable
先来个官网可以直接看官网 https://www.datatables.net/manual/data/ 安装 DataTables是一个功能强大的Javascript库,用于为HTML表格添加交互 ...
- Program-Language
1. 主流编程语言 2. 编程语言分类 2.1 编译or解释 2.2 按照客观系统的描述可分为两类 2.3 按照编程范型可分为 3. 语言范式 Paradigm 4. 计算机语 ...
- Ajax异步操作集合啦（阿贾克斯）
/* * Ajax的核心操作对象是xmlHttpRequest * 简化操作步骤:实例化一个xmlHttpRequest对象 ==> 发送请求 ==> 接受响应 ==> 执行回调 * ...
- AJAX（阿贾克斯）的简单应用
1.ajax 对象的属性说明(常用的) (1)open(method,url,boolean);创建请求,method :填请求类型(get post),url :请求的地址, boolean:tru ...
- 进一步理解阿贾克斯（Ajax）
一.ajax简介 1.Asynchronous JavaScript and XML(异步的Javascript和XML) 2.是一种在无需重新加载整个网页的情况下能够更新部分网页的技术. 二.aja ...
- $.ajax()方法详解--极快瑞中的阿贾克斯函数
ajax() 函数和那些abs()函数 sin()这些函数都是底层实现好了,封装好了,可以直接拿来用的 使用者只需要传入参数,然后就可以得到相应的结果 $.ajax({name:value, name ...
- C#-WebForm-AJAX阿贾克斯（二）★★★★★ajax的完整结构★★★★★
ajax完整结构: $.ajax({ url:"",//服务器路径 data:{},//给服务端传递的参数,可以没有,也可以是多个 type:"post", / ...
- 使用AJAX(阿贾克斯)创建级联菜单
1. html页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
随机推荐
- CentOS 7.2 安装 MySQL 5.6.24
说明:由于甲骨文公司收购了MySQL后,有将MySQL闭源的潜在风险,因此CentOS社区采用mysql的MariaDB分支的方式来避开这个风险. 所以需要先加入yum的仓库,才能利用yum来安装my ...
- shell编程之while死循环
原文 在linux下编程的程序猿都知道shell脚本,就算你不怎么熟悉,也应该听过的吧!那在shell脚本中的死循环该怎么写呢? 对于熟悉C语言的猿人们来说,最简单的死循环应该这样写: ------- ...
- jdk动态代理与cglib代理、spring Aop代理原理-代理使用浅析
原创声明:本博客来源为本人原创作品,绝非他处摘取,转摘请联系博主 代理(proxy)的定义:为某对象提供代理服务,拥有操作代理对象的功能,在某些情况下,当客户不想或者不能直接引用另一个对象,而代理对象 ...
- 打印thinkphp中的sql语句
var_dump($repair->fetchSql(true)->where(array('cuername' =>$cuername))->order('applytime ...
- 最新版PMBOK项目管理的五大过程组和十大知识领域
PMBOK五大过程组是:启动过程.规划过程.执行过程.监控过程.收尾过程. 各用一句话概括项目管理知识体系五大过程组: 1.启动过程组:作用是设定项目目标,让项目团队有事可做: 2.规划过程组:作用是 ...
- HDU4336：Card Collector(min-max容斥)
题面 传送门 Sol 方法一 直接状压就好了 # include <bits/stdc++.h> # define RG register # define IL inline # def ...
- 什么是APP？？？APP的开发类型又分哪几种？？？
开发者们都知道在高端智能手机系统中有两种应用程序: 一种是基于本地(操作系统)运行的APP —-Native App: 一种是基于高端机的浏览器运行的App —-WebApp因为这些高端智能手机(Ip ...
- 一周一个小demo — vue.js实现备忘录功能
这个vue实现备忘录的功能demo是K在github上找到的,K觉得这是一个用来对vue.js入门的一个非常简单的demo,所以拿在这里共享一下. (尊重他人劳动成果,从小事做起~ demo原git ...
- 各种优化方法总结比较（sgd/momentum/Nesterov/adagrad/adadelta）
前言 这里讨论的优化问题指的是,给定目标函数f(x),我们需要找到一组参数x,使得f(x)的值最小. 本文以下内容假设读者已经了解机器学习基本知识,和梯度下降的原理. SGD SGD指stochast ...
- velecity报错：Caused by: org.apache.velocity.exception.ParseErrorException: Lexical error, Encountered: <EOF> after : "\'/order/pay?activity=\" + activityId);\r\n }*/\r\n</script>\r\n#end\r\n" at /a
Caused by: org.apache.velocity.exception.ParseErrorException: Lexical error, Encountered: <EOF> ...