Ajax初识
来源:互联网 发布:搜索音乐的软件 编辑:程序博客网 时间:2024/06/14 02:53
1.Ajax简介
异步javascript和xml(JSON)
Ajax属于客户端和服务端交互的一项技术
原有交互模式:(整个页面刷新+请求和响应同步处理。(就是请求响应了才能发下一个请求))
浏览器请求—>Tomcat服务器—>Tomcat将响应信息给浏览器 浏览器显示响应的结果
用Ajax交互模式:(局部刷新+异步处理)
浏览器请求–>XMLHttpRequest发送–>Tomcat服务器–>Tomcat返回结果–>XMLHttpRequest接收结果 将结果显示到浏览器页面(是XMLHttpRequest接收的然后给浏览器)
2.Ajax好处
具有局部刷新和异步处理特性
提高了程序交互效率(传递数据量要少)
提升用户体验(避免了整个页面频繁刷新)
3.Ajax技术
Ajax技术是一系列技术的综合运用。
基于JS发请求和响应处理
以XMLHttpRequest对象为核心
涉及Html,css页面渲染技术
涉及XML,JSON等数据交互格式
写一个servlet来测试和jsp
不用Ajax的话。点击查看上证指数会发请求,显示tomcat的响应。就不会显示下面的asd和zxc即当前页面的内容。用Ajax的话就可以了。
要注意是XMLHttpRequest 前面的XML都是大写的!!!
就是在jsp页面写ajax
<script type="text/javascript"> //创建XmlHttpRequest对象 function getxhr(){ var xhr = new XMLHttpRequest(); //创建一个HTTP GET请求 xhr.open("get", "servlet/demoservlet"); //默认是异步的 xhr.send(null); //因为是get,所以写的null,如果是psot就写数据了。 } </script> </head> <body><a href="servlet/demoservlet" onclick="getxhr()">查看上证指数</a><br>asdasdzxczxcqweqwe </body></html>
XMLHttpRequest属性
readyState:0,1,2,3,4 请求状态 等于4的话表示请求处理完毕
responseText:获取服务器返回文本信息
responseHtml:获取服务器返回的XML信息
主要是js
index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <title>Ajax Demo</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script type="text/javascript"> //创建XmlHttpRequest对象 function getxhr(){ var xhr = new XMLHttpRequest(); //创建一个HTTP GET请求 xhr.open("get", "servlet/demoservlet"); //默认是异步的 //注册一个回调函数,请求处理时自动调用 //要写在send前面 xhr.onreadystatechange =function(){ if(xhr.readyState==4){//请求处理完毕 //获取请求响应的消息 var msg = xhr.responseText; //将消息放到id=msg的span显示 document.getElementById("msg").innerHTML=msg; } }; xhr.send(null); //因为是get,所以写的null,如果是psot就写数据了。 } </script> </head> <body><b onclick="getxhr()">点击查看上证指数</b><br><span id="msg"></span><br>asdasdzxczxcqweqwe </body></html>
js 函数
//创建XmlHttpRequest对象 function getxhr(){ var xhr = new XMLHttpRequest(); //创建一个HTTP GET请求 xhr.open("get", "servlet/demoservlet"); //默认是异步的 //注册一个回调函数,请求处理时自动调用 //要写在send前面 xhr.onreadystatechange =function(){ if(xhr.readyState==4){//请求处理完毕 //获取请求响应的消息 var msg = xhr.responseText; //将消息放到id=msg的span显示 document.getElementById("msg").innerHTML=msg; } }; xhr.send(null); //因为是get,所以写的null,如果是psot就写数据了。 }
检测注册的名字是否被占用
主要也是练习js使用ajax就是利用XMLHttpRequest的各种方法
js
//ajax提交用户名,servlet检测是否可用 function checkname(){ //获取提交的值 var username = document.getElementById("username").value; var xhr = new XMLHttpRequest(); xhr.open("get", "servlet/Checkname?username="+username); xhr.onreadystatechange =function(){ if(xhr.readyState==4&&xhr.status==200){//请求处理完毕 //获取请求响应的消息 var msg = xhr.responseText; //将消息放到id=msg的span显示 document.getElementById("check").innerHTML=msg; } }; xhr.send(null); }
<br><input type="text" id="username" onblur="checkname()"><span id="check"></span>
servlet
package servlet;/** * 用来简单检测请求传过来的值 */import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class Checkname extends HttpServlet { public void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setCharacterEncoding("utf-8"); response.setContentType("text/html"); PrintWriter out = response.getWriter(); String username = request.getParameter("username"); System.out.println("======被请求======"); System.out.println("username: "+username); if(username.equals("Recar")){ out.print("用户名被占用"); }else{ out.print("可用"); } out.flush(); out.close(); }}
文本框输入测试的用户名。鼠标离开文本框触发事件onblur 调用checkname方法。做ajax请求。然后servlet做处理。利用回调函数判断并赋值 span
与之前的不同的是get的请求带了个参数username
但是用户名是中文的话就用post来发请求
若改成post请求的话改变的就是post和send 数据都在send 中写了
xhr.open("post", "servlet/Checkname"); xhr.send("username="+username);
但是这么写不行。。。
会报500错误
少了个参数
手动增加
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");//给HTTP协议设置请求头 xhr.send("username="+username);
在send前面增加如上参数。这种是自己写js 有jQ的话就很方便
还有要在控制台输出提交的中文要记得设置request的编码
request.setCharacterEncoding("utf-8");
XMLHttpRequest方法
open(“GET|POST”,URL);
send(需要传递的数据);
onreadyStatechange 事件
status:HTTP响应CODE,200,404 500等
readyState改变时触发注册事件
- 初识AJAX
- 初识AJAX
- 初识ajax
- 初识AJAX
- 初识AJAX
- AJAX初识
- 初识ajax
- 初识Ajax
- 初识Ajax
- 初识Ajax
- 初识Ajax
- 初识AJAX
- 初识AJAX
- 初识AJAX
- 初识Ajax
- 初识Ajax
- Ajax初识
- 初识Ajax
- shell变量的子串的删除/替换
- 如何快速访问MSDN某一个类或方法的帮助文档?
- Impala源码阅读——SimpleScheduler
- C语言 atoi函数简单实现
- 在jsp开发中,为什么使用getServletContext()方法代替隐含对象application?
- Ajax初识
- JUCE之控件
- 51Nod - 1092 区间dp
- Qxt的使用
- Stax的基本操作
- [生存志] 第94节 民本王道人和
- python ----1
- js问题!!!
- 别人推荐的书单