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是在不重新加载整个页面的情况下,后台与服务器交换数据并更新 ...
随机推荐
- 【LINK】手机Web开发框架
LINK : http://www.oschina.net/project/tag/322/mobile-web AmazeUI : http://amazeui.org/
- Java NIO Channel to Channel Transfers
In Java NIO you can transfer data directly from one channel to another, if one of the channels is a ...
- 携程机票的ABTest实践
携程ABTest伴随UBT(User Behavior Tracking System)系统一起,两年多的时间,从最初online寥寥几个实验,到现在单是机票BU每周就有数十个app/online/h ...
- Qt信号槽的一些事 Qt::带返回值的信号发射方式
一般来说,我们发出信号使用emit这个关键字来操作,但是会发现,emit并不算一个调用,所以它没有返回值.那么如果我们发出这个信号想获取一个返回值怎么办呢? 两个办法:1.通过出参形式返回,引用或者指 ...
- C# Newtonsoft.Json解析数组的小例子[转]
https://blog.csdn.net/Sayesan/article/details/79756738 C# Newtonsoft.Json解析数组的小例子 http://www.cnblog ...
- Recover Binary Search Tree leetcode java
题目: Two elements of a binary search tree (BST) are swapped by mistake. Recover the tree without chan ...
- 老猪带你玩转自定义控件三——sai大神带我实现ios 8 时间滚轮控件
ios 8 的时间滚轮控件实现了扁平化,带来很好用户体验,android没有现成控件,小弟不才,数学与算法知识不过关,顾十分苦恼,幸好在github上找到sai大神实现代码,甚为欣喜,顾把学习这个控件 ...
- Fixing the JavaScript typeof operator
https://javascriptweblog.wordpress.com/2011/08/08/fixing-the-javascript-typeof-operator/javascript 类 ...
- Kafka:ZK+Kafka+Spark Streaming集群环境搭建(八)安装zookeeper-3.4.12
如何搭建配置centos虚拟机请参考<Kafka:ZK+Kafka+Spark Streaming集群环境搭建(一)VMW安装四台CentOS,并实现本机与它们能交互,虚拟机内部实现可以上网.& ...
- 转: Xshell鼠标选中,终端立即中断(CTRL-C)的问题
转自: https://nkcoder.github.io/2014/05/05/xshell-select-interrupt-dict/ Xshell选中文字复制时中断 在Xshell中设置了“自 ...