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是在不重新加载整个页面的情况下,后台与服务器交换数据并更新 ...
随机推荐
- 在windows2012上安装MSSQL 2008 Manage Studio 出现错误
在windows2012上安装MSSQL 2008 Manage Studio 出现错误: 解决方法:重新建立一个管理员账户,用另外一个账户登陆,然后安装. 原因:未知 --------------- ...
- AlphaGo 开源项目研究(1)
本文的原文连接是: http://blog.csdn.net/freewebsys/article/details/50907446 未经博主同意不得转载. 博主地址是:http://blog.csd ...
- android自己定义换行居中CenterTextView
在我们开发app时,TextView一定是使用最多的控件了,android自带的TextView的功能也十分强大.但还是有些小的地方不能满足我们的需求.几天要说的这个功能也是开发中非经常见的.就是,在 ...
- C# winform DevExpress上传图片到数据库【转】
实现功能如下图: 注明:此文使用的是DevExpress控件,winform 原生控件也是一样使用方法. 1.点击选择图片按钮,功能为通过对话框选择要上传的文件,并将该文件在下面的PictureEdi ...
- Doxygen简单经验谈。。。
Doxygen,大名鼎鼎的文档生成工具,被Boost.OpenCasCade等诸多项目作为文档生成的不二人选.人说,才华横溢往往是高深莫测,这句话放在 Doxygen这里显然是不适用的.十八般武艺样样 ...
- Valid Number leetcode java
题目: Validate if a given string is numeric. Some examples: "0" => true " 0.1 " ...
- 转:Parameter Server 详解
Parameter Server 详解 本博客仅为作者记录笔记之用,不免有很多细节不对之处. 还望各位看官能够见谅,欢迎批评指正. 更多相关博客请猛戳:http://blog.csdn.net/c ...
- curl_setopt — 设置 cURL 传输选项
curl_setopt (PHP 4 >= 4.0.2, PHP 5, PHP 7) curl_setopt — 设置 cURL 传输选项 bool curl_setopt ( resource ...
- jquery旋转图片
今天介绍一款 jQuery 插件——jqueryrotate,它可以实现旋转效果.jqueryrotate 支持所有主流浏览器,包括 IE6.如果你想在低版本的 IE 中实现旋转效果,那么 jquer ...
- 使用FractionSlider生成的视差幻灯效果原型
在线演示 本地下载 非常棒的jQuery插件,帮助你创建超酷的视差效果幻灯!