Ajax学习(一)
ajax是什么?
Asynchronous Javascript And XML:异步的js和xml
他能使得js访问服务器,而且是异步的。
服务器给客户端的响应一般是整个页面,一个完整的html页面,但是在ajax中,是局部刷新,那么服务器不用响应整个页面,而只是数据。
- 》text:纯文本
- 》xml:xml格式
- 》json:他是js提供的数据交互格式,他在ajax中最受欢迎
异步交互和同步交互:
- 同步:
- 》发出请求,就要等待服务器的响应结束,然后才能发出第二个请求,中间这段时间就一个字:卡
- 》刷新的是整个页面
- 异步:
- 》发出一个请求,无需等待服务器的响应,然后就可以发出第二个请求
- 》可以使用js接收服务器的响应,然后使用js进行局部刷新。
ajax应用场景:
- 百度的搜索框:输入关键字,出现一堆推荐关键字
- 用户注册:(校验用户名是否注册过,提示信息)
- 淘宝刷评论:淘宝的评论,刷到底部,继续刷新新的评论,而不用刷新整个页面。
Ajax优缺点:
优点:
异步交互:增强体验
性能:因为服务器无需响应整个页面,只需响应部分页面,服务器压力减轻。
缺点:
Ajax不能应用所有场景。
Ajax无端多了很多请求,给服务器带来压力。
Ajax发送异步请求(四步操作)
第一步:得到(XMLHttpRequest)
Ajax其实只需要学习一个对象:XMLHttpRequest,如果掌握了它,就掌握了Ajax,
得到XMLHttpRequest
- 》大多数浏览器都支持:var xmlHttp=new XMLHttpRequest();
- 》IE6.0,var xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
- 》IE5.5以及更早,var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
编写创建XMLHttpRequest对象的函数:
function createXMLRequst(){
try{
return new XMLHttpRequest();
}catch(e)
{
try{
return new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
return new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
alert("不支持浏览器版本");
throw e;
}
}
}
}
第二步:(打开与服务器的链接)
- *:xmlHttp.open();用来打开与服务器的链接,需要三个参数:
- 》请求方式:可以是Get或POST
- 》请求的url:指定服务器端资源,例如:/AjaxDemo/AjaxServlet。
- 》请求是否异步:如果为true,表示发送异步请求,否则同步请求。
*:xmlHttp.open("GET","/AjaxDemo/AjaxServlet",true);
第三步:(发送请求)
*:xmlHttp.send(null);如果不给可能会造成部分浏览器无法发送。
参数:就是请求体内容,如果是GET请求,必须给出null.
第四步:()
- *:在xmlHttp对象的一个事件上注册监听器;onreadystatechange。
- *:xmlHttp对象一共有五个状态:
- 0:初始化未完成状态,只是创建了XMLHttpRequest对象,还未调用open()方法。
- 1:请求已开始,open已经调用,但是还没调用send()方法。
- 2:请求发送完成状态,send方法已调用。
- 3:开始读取服务器响应,但是不表示响应结束!
- 4:读取服务器响应结束。(通常只关心这个状态!!!)
- *:得到 xmlHttp对象的状态:
》var state=xmlHttp.readState;//值可能是0,1,2,3,4
*:得到服务器的响应状态吗:
》:var status=xmlHttp.status; //例如200(响应成功),400,500
*:得到服务器的响应内容:
》:var content=xmlHttp.responseText;//得到服务器的响应的文本格式的内容。
》:var content=xmlHttp.responseXML;//得到服务器响应的xml响应内容,他是document对象了。
注册状态发生监听事件
xmlHttp.onreadystatechange=function()
{
//双重判断,判断是否为4的状态,并且响应状态码为:200
if(xmlHttp.readyState==4 && xmlHttp.status==200)
{
//获取相应内容:
var text=xmlHttp.responseText;
} }
第二例:发送post请求(如果发送请求时候需要带有参数,一般都用post请求)
open:xmlHttp.open("POST"..);
添加一步:设置Content-type请求头;
》xmlHttp.setRequestHeader("Content-Type","application/x-wwww-form-urlencoded");
*send:xmlHttp.send("username=zhangshan&password=123");//发送请求时候指定请求体
实例:验证用户名
当用户名已经被注册了,提示

新建一个ValidateUserNameServlet的servlet,用来判断是是否用户名是否重复。
通过:response.getWriter().println("");向客户端输出数据,Ajax获取到该数据,进行处理。
package com.Ajax; import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; @WebServlet("/ValidateUserNameServlet")
public class ValidateUserNameServlet extends HttpServlet {
private static final long serialVersionUID = 1L; public ValidateUserNameServlet() {
super();
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8"); String username=request.getParameter("username");
if(username.equalsIgnoreCase("lfh"))
response.getWriter().println("1");
else
response.getWriter().println("0");
} }
页面代码:
<h1>演示用户名是否注册</h1>
<form action="" method="post">
用户名:<input type="text" name="username" id="username"/><span id="erroSpan"></span><br/>
密码:<input type="password" name="password" id="password"/> <br/>
<input type="submit" value="注册"/>
</form>
脚本代码:通过Ajax向服务器发送请求,服务器返回的数据给Ajax后,进行处理。
<script type="text/javascript">
function createXMLRequst(){ try{
return new XMLHttpRequest();
}catch(e)
{
try{
return new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
return new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
alert("不支持浏览器版本");
throw e;
}
}
}
} window.onload=function(){ //文档加载完毕后执行 var btn=document.getElementById("username");
btn.onblur=function(){
//四步得到异步对象
var xmlHttp=createXMLRequst();
/*
打开与服务器的链接
指定请求方式,指定请求地址,指定是否为异步请求
*/
xmlHttp.open("POST","/AjaxDemo/ValidateUserNameServlet",true);
//设置请求头
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//发送请求,加上请求参数
xmlHttp.send("username="+btn.value);
///给异步对象的onreadystatechange事件注册监听器
xmlHttp.onreadystatechange=function()
{
//双重判断,判断是否为4的状态,并且响应状态码为:200
if(xmlHttp.readyState==4 && xmlHttp.status==200)
{
//获取相应内容:
var text=xmlHttp.responseText;
var span=document.getElementById("erroSpan");
if(text==1)
span.innerHTML="用户名已经存在";
else
span.innerHTML="";
}
}
}
} </script>
完整页面代码:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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">
<script type="text/javascript">
function createXMLRequst(){ try{
return new XMLHttpRequest();
}catch(e)
{
try{
return new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
return new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
alert("不支持浏览器版本");
throw e;
}
}
}
} window.onload=function(){ //文档加载完毕后执行 var btn=document.getElementById("username");
btn.onblur=function(){
//四步得到异步对象
var xmlHttp=createXMLRequst();
/*
打开与服务器的链接
指定请求方式,指定请求地址,指定是否为异步请求
*/
xmlHttp.open("POST","/AjaxDemo/ValidateUserNameServlet",true);
//设置请求头
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//发送请求,加上请求参数
xmlHttp.send("username="+btn.value);
///给异步对象的onreadystatechange事件注册监听器
xmlHttp.onreadystatechange=function()
{
//双重判断,判断是否为4的状态,并且响应状态码为:200
if(xmlHttp.readyState==4 && xmlHttp.status==200)
{
//获取相应内容:
var text=xmlHttp.responseText;
var span=document.getElementById("erroSpan");
if(text==1)
span.innerHTML="用户名已经存在";
else
span.innerHTML="";
}
}
}
} </script>
<title>演示用户名是否注册</title>
</head>
<body> <h1>演示用户名是否注册</h1>
<form action="" method="post">
用户名:<input type="text" name="username" id="username"/><span id="erroSpan"></span><br/>
密码:<input type="password" name="password" id="password"/> <br/>
<input type="submit" value="注册"/>
</form>
</body>
</html>
效果:

Ajax学习(一)的更多相关文章
- Ajax学习心得
Ajax学习心得 大致学了下Ajax,才知道它不是某种编程语言,而是一种在无需加载整个页面的情况下能够更新部分网页的技术.了解了它的功能后觉得这真是一种好的技术,这得给前端和运维省多少力啊! 传统的网 ...
- AJax 学习笔记二(onreadystatechange的作用)
AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...
- ajax学习之post请求步骤
ajax学习之post请求步骤 蚣汉御豁 讼护尧 娉郐皑 磲 力豪强的虎视眈眈相信过不了 觏随迦趾 怪了灵敏儿竟然不慌不忙的也没有来找她们 缸轰诎 ?ê戆冼 跄鲅胗绩 掳戈玉孑 馀模嗷婧 ...
- AJAX学习前奏----JS基础加强
AJAX学习前奏----JS基础加强 知识概要: 1.js类&属性&方法的定义 2.静态属性与方法 3.构造方法 4.原型的使用 5.Object对象直接加属性和方法 6.JSO ...
- AJAX学习必备三本书
<AJAX基础教程>AJAX必备图书之一.国内发行的第一本AJAX图书,也是目前最好的AJAX入门书,如果您是AJAX新手,此书是最好的入门图书.本书基本包括了实现Ajax需要了解的大部分 ...
- AJAX学习2
作者声明:本博客中所写的文章,都是博主自学过程的笔记,参考了很多的学习资料,学习资料和笔记会注明出处,所有的内容都以交流学习为主.有不正确的地方,欢迎批评指正. 本文学习内容:https://www. ...
- [学习笔记]AJAX学习
AJAX学习 ——在w3cschool学习AJAX的学习笔记 参考网站:w3cschool XMLHttpRequest 是 AJAX 的基础. XMLHttpRequest 对象 所有现代浏览器均支 ...
- AJAX学习小结
12345678910 $.ajax({ "url":"", //访问路径 "data":"", // 需要传输的数据 ...
- Ajax学习笔记demo
AJAX学习 AJAX简介: 全称:Asynchronous JavaScript and XML (JavaScript执行异步网络请求(JS和XML)),通过AJAX可以在浏览器向服务器发送异步请 ...
- Ajax学习重点总结
1.什么是AJAX AJAX=Asynchronous JavaScript and XML(异步的JavaScript和XML). AJAX是在不重新加载整个页面的情况下,后台与服务器交换数据并更新 ...
随机推荐
- LaTeX技巧:LaTeX括号总结
功能 语法 显示 不好看 ( \frac{1}{2} ) 好一点 \left( \frac{1}{2} \right) 您可以使用\left和\right来显示不同的括号: 功能 语法 显示 ...
- YAML文件简介
编程免不了要写配置文件,怎么写配置也是一门学问. YAML 是专门用来写配置文件的语言,非常简洁和强大,远比 JSON 格式方便. 本文介绍 YAML 的语法,以 JS-YAML 的实现为例.你可以去 ...
- Windows平台Mysql使表名区分大小写
my.ini 里面的mysqld部分 加入 lower_case_table_names=2 [mysqld] lower_case_table_names=2 port= 3306 注: 1 ...
- MySQL 查询优化简记
今天尝试对一张MySQL表做查询优化, 500W数据 但是发现加了索引比不加索引使用全表扫描还慢, 上网查, 据说是因为需要回表, 因为没有用到 using index(覆盖索引), 而回表查询是随机 ...
- 人脸识别中的Procruster analysis应用
本文中,我们通过Procrustes analysis来处理特征点,Procrustes analysis算法可以参考:http://en.wikipedia.org/wiki/Procrustes_ ...
- 在PC上像普通winform程序调试WINCE程序
在PC上像普通winform程序调试WINCE程序 步骤: 1. 在VS2008中到 工具→选项→设备工具→设备,选择对应的平台,另存为新的名称,如CEDesktopRun,关闭VS2008.(如果不 ...
- asp.net使用jquery.form实现图片异步上传
首先我们需要做准备工作: jquery下载:http://files.cnblogs.com/tianguook/jquery1.8.rar jquery.form.js下载:http://files ...
- jquery 控制css样式
一.CSS 1.css(name) 访问第一个匹配元素的样式属性. 返回值 String 参数 name (String) : 要访问的属性名称 示例: $("p").css(&q ...
- 【架构】ServiceMesh初步了解
ServiceMesh初步了解 servicemesh_百度搜索 初识Service Mesh - 原力注入微信公众账号 Service Mesh解读:新一代微服务技术新秀_EAII-企业架构创新研究 ...
- javascript——select 标签的使用
<% String state = (String) request.getAttribute("state"); String day = (String) request ...