第88节：Java中的Ajax和ASP.NET和TCP/IP 教程和JSON-白红宇

第88节：Java中的Ajax和Jquery

ajax是什么？有什么用？原理，怎么用？

ajax是asynchronous javascript and xml(异步javascript和xml)，是指一种创建交互式网页应用的网页开发技术。

如用户注册，输入的用户名，提示已经被注册了。

AJAX

Asynchronous JavaScript and XML

ajax是一种不用重新加载整个网页的情况下，能够更新部分网页的技术。

什么是ajax?

是异步 JavaScript 和 XML，是一种用于快速动态网页的技术，能够在后台与服务器进行少量的数据交换，就可以实现网页的异步更新了，就不用重新加载整个网页，让部分需要进行更新的内容进行更新了。

AJAX 实例

// div 来自服务器的信息
    
     dashucoding
    
复制代码

复制代码

创建 XMLHttpRequest 对象

XMLHttpRequest 是 AJAX 的基础 XMLHttpRequest 用于在后台与服务器交换数据 IE5 和 IE6 使用 ActiveXObject

创建对象：

variable=new XMLHttpRequest();复制代码

var xmlhttp;if (window.XMLHttpRequest)  {  xmlhttp=new XMLHttpRequest();  }else  { // code for IE6, IE5  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  }复制代码

XMLHttpRequest 对象用于和服务器交换数据

xmlhttp.open("GET","test1.txt",true);xmlhttp.send();open(method,url,async)method GET 或 POST 请求的类型url async true（异步）或 false（同步）send(string) 将请求发送到服务器仅用于 POST 请求复制代码

GET 和 POST:

GET更快更简单。使用POST的情况：

无法使用缓冲文件

向服务器发送大量数据

发送未知字符

GET 请求

xmlhttp.open("GET","demo_get.asp",true);xmlhttp.send();复制代码

xmlhttp.open("GET","demo_get2.asp?fname=dashu&lname=coding",true);xmlhttp.send();复制代码

POST 请求

xmlhttp.open("POST","demo_post.asp",true);xmlhttp.send();复制代码

xmlhttp.open("POST","ajax_test.asp",true);xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");xmlhttp.send("fname=dashu&lname=Coding");// setRequestHeader(header,value)header: 规定头的名称 value: 规定头的值 复制代码

url - 服务器上的文件

xmlhttp.open("GET","ajax_test.asp",true);// 可以是任何类型的文件复制代码

True 或 False

异步 JavaScript 和 XML

xmlhttp.open("GET","ajax_test.asp",true);复制代码

xmlhttp.onreadystatechange=function()  {  if (xmlhttp.readyState==4 && xmlhttp.status==200)    {    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;    }  }xmlhttp.open("GET","test1.txt",true);xmlhttp.send();复制代码

异步false

xmlhttp.open("GET","test1.txt",false);// 不推荐使用xmlhttp.open("GET","test1.txt",false);xmlhttp.send();document.getElementById("myDiv").innerHTML=xmlhttp.responseText;复制代码

服务器响应

属性	描述
`responseText`	获取字符串式的响应数据
`responseXML`	获取xml式的响应数据

responseText属性：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;复制代码

xmlDoc=xmlhttp.responseXML;txt="";x=xmlDoc.getElementsByTagName("ARTIST");for (i=0;i
    ";  }document.getElementById("myDiv").innerHTML=txt;复制代码

onreadystatechange 事件

readyState 被改变时，会触发 onreadystatechange事件，readyState属性存有XMLHttpRequest的信息。

onreadystatechange 存储函数readyState0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪 status200: "OK"404: 未找到页面复制代码

xmlhttp.onreadystatechange=function()  {  if (xmlhttp.readyState==4 && xmlhttp.status==200)    {    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;    }  }复制代码

function showHint(str){var xmlhttp;if (str.length==0)  {  document.getElementById("txtHint").innerHTML="";  return;  }if (window.XMLHttpRequest)  {// code for IE7+, Firefox, Chrome, Opera, Safari  xmlhttp=new XMLHttpRequest();  }else  {// code for IE6, IE5  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  }xmlhttp.onreadystatechange=function()  {  if (xmlhttp.readyState==4 && xmlhttp.status==200)    {    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;    }  }xmlhttp.open("GET","gethint.asp?q="+str,true);xmlhttp.send();}复制代码

是一个开发框架

TCP/IP 教程

XmlHttp

abort取消当前请求，语法：

oXMLHttpRequest.abort();复制代码

getAllResponseHeaders 获取响应的所有http头

语法：

strValue = oXMLHttpRequest.getAllResponseHeaders();复制代码

var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP.3.0");xmlhttp.open("GET", "http://localhost/sample.xml", false);xmlhttp.send();alert(xmlhttp.getAllResponseHeaders());复制代码

getResponseHeader: 从响应信息中获取指定的http头

语法：

strValue = oXMLHttpRequest.getResponseHeader(bstrHeader);复制代码

var xmlhttp = new ActiveXObject("MSXML2.XMLHTTP.3.0");xmlhttp.open("GET", "http://localhost/sample.xml", false);xmlhttp.send();alert(xmlhttp.getResponseHeader("Server"));复制代码

onreadystatechange 指定当readyState属性改变时的事件处理句柄

语法：

oXMLHttpRequest.onreadystatechange = funcMyHandler;复制代码

介绍 JSON

一种轻量级的数据交换格式

一个对象以“{” 开始，“}” 结束

每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔

数组是值的有序集合

以“[”开始，“]”结束，值之间使用“,”分隔

Ajax

获取文本内容document.getElementById("username").value通过XmlHttpRequest请求，XML+http+Request复制代码

请求

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%>
    Insert title here	使用Ajax方式发送Get请求
复制代码

Post

<%@ page language="java" contentType="text/html; charset=UTF-8"	pageEncoding="UTF-8"%>
    Insert title here			使用Ajax方式发送Post请求	
复制代码

数据请求，创建对象：

校验用户名

dao

import java.sql.SQLException;public interface UserDao {	/**	 * 用于检测用户名是否存在	 */	boolean checkUserName(String username) throws SQLException;}复制代码

util:

public class JDBCUtil02 {		static ComboPooledDataSource dataSource = null;	static{		dataSource = new ComboPooledDataSource();	}		public static DataSource getDataSource(){		return dataSource;	}		/**	 * 获取连接对象	 * @return	 * @throws SQLException 	 */	public static Connection getConn() throws SQLException{		return dataSource.getConnection();	}		/**	 * 释放资源	 * @param conn	 * @param st	 * @param rs	 */	public static void release(Connection conn , Statement st , ResultSet rs){		closeRs(rs);		closeSt(st);		closeConn(conn);	}	public static void release(Connection conn , Statement st){		closeSt(st);		closeConn(conn);	}		private static void closeRs(ResultSet rs){		try {			if(rs != null){				rs.close();			}		} catch (SQLException e) {			e.printStackTrace();		}finally{			rs = null;		}	}		private static void closeSt(Statement st){		try {			if(st != null){				st.close();			}		} catch (SQLException e) {			e.printStackTrace();		}finally{			st = null;		}	}		private static void closeConn(Connection conn){		try {			if(conn != null){				conn.close();			}		} catch (SQLException e) {			e.printStackTrace();		}finally{			conn = null;		}	}}复制代码

public class TextUtils {	/**	 * 判断某一个字符串是否为空。	 */	public static boolean isEmpty(CharSequence s){		return s==null || s.length() == 0;	}}复制代码

servlet

try{ request.setCharacterEncoding("UTF-8"); String name = request.getParameter("name"); UserDao dao = new UserDaoImpl(); boolean isExist = dao.checkUserName(name);  if(isExist){  response.getWriter().println(1)；// 存在 }else{  response.getWriter().println(2); // 反之 }}catch(SQLException e){ e.printStackTrace();}复制代码

xxx.jsp复制代码

复制代码

结言

好了，欢迎在留言区留言，与大家分享你的经验和心得。

感谢你学习今天的内容，如果你觉得这篇文章对你有帮助的话，也欢迎把它分享给更多的朋友，感谢。

达叔小生：往后余生，唯独有你 You and me, we are family ! 90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通简书博客：达叔小生

结语

下面我将继续对其他知识深入讲解，有兴趣可以继续关注

小礼物走一走 or 点赞