尝试将笔记记录一哈，有很多不足谅解
具体内容参考视频学习：https://edu.aliyun.com/roadmap/java
目录
02-Ajax篇
01- 同步与异步
Ajax：（asynchronous javascript and xml ） 异步的js 和 xml；
异步交互和同步交互：
同步：
发一个请求，等待服务器响应结束，然后发出第二个请求，等待时间就是一个字“卡”！
刷新的是整个页面；
异步：
发一个请求后，无需等待服务器的响应，然后就可以发出第二个请求 ！
可以使用 js 接受雾浮起的响应，然后使用 js 来局部刷新！
<%-- Created by IntelliJ IDEA. User: Lenovo To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>ajax_learning</title> <script type="text/javascript"> window.onload = function () { var btn = document.getElementById("btn"); btn.onclick = function () { var h1 = document.getElementById("h1"); h1.innerHTML="successfully clicking, on my god ! "; } }; </script> </head> <body> <button id="btn">click here</button> <h1 id="h1"></h1> </body> </html>
02- 同步 & 异步（2）
服务器给客户端的响应一般是整个页面，而 ajax 中的局部刷新，服务器响应的就不再是整个页面，而只是一串数据data；
text 纯文本
xml
json 由 js 提供的数据交互格式，在Ajax中最受欢迎！
03- Ajax的应用场景和优缺点
例如：文本框下面的关键字提示
增强了用户体验；
还有：
登录注册时，若用户名已存在，则回显 “用户名已存在”；
ajax优点：
-
异步交互，增强了用户体验；
-
性能，减轻服务器压力；
ajax缺点：
-
不断向服务器（访问次数增多）发出请求，增加压力；区别优点，举例说明；
04- ajax 四步操作（发送异步请求）
-
第一步（得到XMLHttpRequest）：
大多数浏览器，都支持：var xmlhttp = new XMLHttpRequest () ;
少数：
IE6.0： var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
IE5.5： var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
创建XMLHttpRequest 对象：
function createXMLHttpRequest(){
try{
return new XMLHttpRequest();
}catch(e){
try{
return new ActiveXObject("Mszml2.XMLHTTP");
}catch(e){
try{
return new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
alert("你确定你写对了嘛，还是用的啥浏览器啊？");
throw e;
}
}
}
}-
第二步，打开与服务器的连接：
xmlHttp.open()：用来打开与服务器的连接，选哟三个参数：
请求方式：get & post
请求的url：指定服务器端的资源：../ Aservlet; （e.g.）
请求是否为异步：如果为 true，表示发送异步请求；
xmlHttp.open( "get", "url:../Aservlet", true );
-
第三步：发布请求
xmlHttp.send(null)：如果不给，可能造成某些浏览器无法发送；
参数：就是请求体内容，如果是get 请求，必须给出 null。
-
第四步：impotent
在xmlHttp对象的一个事件上注册监听器：onreadystatechange
xmlHttp的五个状态：
0状态：刚创建，未调用open方法；
1状态：未调用send方法；
2状态：调用完了send方法；
3状态：服务器开始响应，但不表示幸运结束；
4状态：服务器响应结束；（*）
得到xmlHttp 对象的状态：
var state = xmlHttp.readyState; // 可能为0，1，2，3，4
得到服务器响应的状态码：
var status = xmlHttp.status; // 200,404.500;
得到响应的内容：
var content = xmlHttp.responseText; // 得到服务器的响应的文本格式的内容；
var content = xmlHttp.responseXML; // 得到服务器响应的xml响应的内容： 是Document对象；
xmlHttp.onreadystatechange = function(){ if(xmlHttp.readyState == 4 && xmlHttp.status == 200){// 双重判断 var text = xmlHttp.responseText;// 多使用 responseText; } }
05- hello world
package Test.ajaxdemo;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
public class AjaxServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("hello ajax");
response.getWriter().print("response.get.helloAjax!!!clicking!");
}
}
<%--
Created by IntelliJ IDEA.
User: Lenovo
To change this template use File | Settings | File Templates.
--%><!-- ajax02.jsp -->
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>ajax_learning</title>
<script type="text/javascript">
function createXMLHttpRequest(){// 创建异步对象
try {
return new XMLHttpRequest();
}catch (e) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
}catch (e) {
alert("error!!!!!!!!!!!!!!");
throw e;
}
}
}
}
window.onload = function () {
var btn = document.getElementById("btn");
btn.onclick = function () {
// 四步操作，得到响应在，回显；
xmlHttp = createXMLHttpRequest(); // 01
xmlHttp.open("get","<c:url value='/AjaxServlet'/>", true); // 02 <c:url ...> 需要：
<!-- <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> -->
xmlHttp.send(null); // 03
xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState === 4 && xmlHttp.status === 200){
var h1 = document.getElementById("h1");
var text = xmlHttp.responseText;
h1.innerHTML = text;// get the text;
}
}
}
};
</script>
</head>
<body>
<button id="btn">click here</button>
<h1 id="h1"></h1>
</body>
</html>
<servlet><!-- web.xml -->
<servlet-name>AjaxServlet</servlet-name>
<servlet-class>Test.ajaxdemo.AjaxServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AjaxServlet</servlet-name>
<url-pattern>/ajaxServlet</url-pattern>
</servlet-mapping>06- 发送post 请求
-
open ，设置请求头；
-
> xmlHttp.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" );
-
send: xmlHttp.send( "username=JasonCH&password=123" );
var xmlHttp = createXMLHttpRequest();
xmlHttp.open("post","<c:url value="/validateUsernameServlet"/>", true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send("username="+userElem.value);
// 需要修改的地方；07- 用户名是否存在？
package servlet;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
public class validateUsernameServlet extends HttpServlet {
@Override
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("JasonCH")){
response.getWriter().print("1");
}else{
response.getWriter().print("0");
}
}
}
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
Created by IntelliJ IDEA.
User: Lenovo
To change this template use File | Settings | File Templates.
--%>
<html>
<head>
<title>ajax_learning</title>
<script type="text/javascript">
function createXMLHttpRequest(){// 创建异步对象
try {
return new XMLHttpRequest();
}catch (e) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
}catch (e) {
alert("error!!!!!!!!!!!!!!");
}
}
}
}
window.onload = function () {
var userElem = document.getElementById("usernameElem");
userElem.onblur = function(){
var xmlHttp = createXMLHttpRequest();
xmlHttp.open("post","<c:url value="/validateUsernameServlet"/>", true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send("username="+userElem.value);
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState===4 && xmlHttp.status===200){
var text = xmlHttp.responseText;
var span = document.getElementById("errorSpan");
if(text === "1"){
span.innerText = "用户名已存在";
}else{
span.innerText = "";
}
}
}
}
}
</script>
</head>
<body>
<h1>用户名是否存在：？</h1>
<form action="" method="post">
username: <input type="text" name="username" id="usernameElem" placeholder="username"><span id="errorSpan" style="color: red"></span>
<br />
password: <input type="password" name="password" id="pwd" placeholder="password">
<br>
<input type="submit" value="submit">
</form>
</body>
</html>
08- xml
<script>
var doc = xmlHttp.responseXML;
</script>09- 省市联动：
利用xml 作为数据库存储 省市信息，通过ajax 实现局部更新操作；
China-xml:
<?xml version="1.0" encoding="UTF-8" ?>
<China>
<province name="Beijing">
<city>B_addr1</city>
<city>B_addr2</city>
<city>B_addr3</city>
</province>
<province name="Shanghai">
<city>S_addr1</city>
<city>S_addr2</city>
<city>S_addr3</city>
</province>
</China>
provinceServlet:
package servlet;
import org.dom4j.Attribute;
import org.dom4j.Document;
import org.dom4j.DocumentException;
import org.dom4j.io.SAXReader;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStream;
import java.util.List;
public class ProviceServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//
try {
SAXReader reader = new SAXReader();
InputStream input = new FileInputStream(
new File("D:\\web前端开发\\JavaWeb_demo\\01_demo_\\src\\data\\China.xml")
);
Document doc = reader.read(input);
List<Attribute> lsts_name = doc.selectNodes("//province/@name");//
StringBuilder sb = new StringBuilder();
for (int i = 0; i < lsts_name.size(); i++) {
sb.append(lsts_name.get(i).getValue());
if(i<lsts_name.size()-1){
sb.append(",");
}
}
response.getWriter().print(sb);//
} catch (DocumentException e) {
e.printStackTrace();
}
}
}
CityServlet:
package servlet;
import org.dom4j.*;
import org.dom4j.io.SAXReader;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStream;
public class CityServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/xml;charset=utf-8");
//
try {
SAXReader reader = new SAXReader();
InputStream input = new FileInputStream(
new File("D:\\web前端开发\\JavaWeb_demo\\01_demo_\\src\\data\\China.xml")
);
Document doc = reader.read(input);
//
String province = request.getParameter("province");
Element elem = (Element) doc.selectSingleNode("//province[@name='" + province + "']");//
String xmlStr = elem.asXML();
System.out.println(xmlStr);
response.getWriter().print(xmlStr);
} catch (DocumentException e) {
e.printStackTrace();
}
}
}
province&city_ajax05:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
Created by IntelliJ IDEA.
User: Lenovo
To change this template use File | Settings | File Templates.
--%>
<html>
<head>
<title>ajax_learning</title>
<script type="text/javascript">
function createXMLHttpRequest(){// 创建异步对象
try {
return new XMLHttpRequest();
}catch (e) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
}catch (e) {
alert("error!!!!!!!!!!!!!!");
}
}
}
}
window.onload = function () {
// province then city;
var xmlHttp = createXMLHttpRequest();
xmlHttp.open("get","<c:url value="/proviceServlet"/>",true);
xmlHttp.send(null);// 无请求体；
xmlHttp.onreadystatechange = function () {
if(xmlHttp.readyState===4 && xmlHttp.status===200){
var text = xmlHttp.responseText;//
var pro_arr = text.split(",");
for(var i=0;i<pro_arr.length;i++){
var op = document.createElement("option");
op.value = pro_arr[i];
op.appendChild(document.createTextNode(pro_arr[i]));
//
document.getElementById("pro").appendChild(op);
}
}
};
var proSelect = document.getElementById("pro");
console.log(proSelect);
proSelect.onchange = function () {
// province then city;
var xmlHttp = createXMLHttpRequest();
xmlHttp.open("post","<c:url value="/cityServlet"/>",true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send("province=" + proSelect.value);
xmlHttp.onreadystatechange = function () {
if(xmlHttp.readyState===4 && xmlHttp.status===200){
var citylst = document.getElementById("ct");
var options = citylst.getElementsByTagName("option");
while(options.length>1){
citylst.removeChild(options[1]);
}// end the while-> deleting the child node;
//
var doc = xmlHttp.responseXML;//
console.log(doc);
var city_elems = doc.getElementsByTagName("city");
console.log(city_elems);
for(var i=0;i<city_elems.length;i++){
var city_elem = city_elems[i];
var cityName;
if(window.addEventListener){
cityName = city_elem.textContent;// fireBox
}else{
cityName = city_elem.text;// IE and others;
}//
var op = document.createElement("option");
op.value = cityName;
op.appendChild(document.createTextNode(cityName));//
document.getElementById("ct").appendChild(op);//
}
}
}
}
};
</script>
</head>
<body>
<h1>省市联动</h1>
<hr/>
<select name="province" id="pro">
<option>===the province===</option>
</select>
<select name="city" id="ct">
<option>===the city===</option>
</select>
</body>
</html>
7823
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
