`

比较完整的原始ajax写法

    博客分类：
  • AJAX
AjaxNokiaServletXML浏览器 
阅读更多

刚开始学习Ajax，当然是先把原理性的东西弄懂了，在去用什么js框架，那样才能得心应手：

以下是我收集的资料，写的注释比较多，适合快速理解和上手使用，因为大部分是js代码，就没有专门写成js文件。

originalityAjax.html代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>最原始的ajax写法</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<script type="text/javascript">
	
	//这个方法将使用XMLHTTPRequest对象来进行AJAX的异步数据交互
	var xmlHttpRequest;

	//用户名校验的方法
	function verify() {
		var success = createXMLHTTPRequest();
		if (!success) {
			return;
		}
		var userName = document.getElementById("userName").value;//获取用户名字
		//2.注册回调函数
		//注册回调函数时，之需要函数名，不要加括号
		//我们需要将函数名注册，如果加上括号，就会把函数的返回值注册上，这是错误的
		xmlHttpRequest.onreadystatechange = callback;

		//3。设置连接信息
		//第一个参数表示http的请求方式，支持所有http的请求方式，主要使用get和post
		//第二个参数表示请求的url地址，get方式请求的参数也在url中
		//第三个参数表示采用异步还是同步方式交互，true表示异步
		//记住在url后面加上时间戳
		//xmlHttpRequest.open("GET", "OriginalityAjaxAction?username=" + userName, true);

		//POST方式请求的代码
		xmlHttpRequest.open("POST", "OriginalityAjaxAction", true);
		//POST方式需要自己设置http的请求头
		xmlHttpRequest.setRequestHeader("Content-Type",
				"application/x-www-form-urlencoded");
		//POST方式发送数据
		xmlHttpRequest.send("username=" + userName);

		//4.发送数据，开始和服务器端进行交互
		//同步方式下，send这句话会在服务器段数据回来后才执行完
		//异步方式下，send这句话会立即完成执行
		//xmlHttpRequest.send(null);

	}

	//回调函数
	function callback() {
		//alert(xmlHttpRequest.readyState);
		//5。接收响应数据
		//判断对象的状态是交互完成
		if (xmlHttpRequest.readyState == 4) {
			//判断http的交互是否成功
			if (xmlHttpRequest.status == 200) {
				//获取服务器器端返回的数据
				//获取服务器段输出的纯文本数据
				var responseText = xmlHttpRequest.responseText;
				//将数据显示在页面上
				//通过dom的方式找到div标签所对应的元素节点
				var divNode = document.getElementById("result");
				//设置元素节点中的html内容
				divNode.innerHTML = responseText;
			} else {
				alert("出错了！！！");
			}
		}
	}

	//创建XMLHTTPRequest对象来进行AJAX的异步数据交互
	function createXMLHTTPRequest() {
		//1.创建XMLHttpRequest对象
		//这是XMLHttpReuquest对象无部使用中最复杂的一步
		//需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码

		if (window.XMLHttpRequest) {
			//针对FireFox，Mozillar，Opera，Safari，IE7，IE8
			xmlHttpRequest = new XMLHttpRequest();
			//针对某些特定版本的mozillar浏览器的BUG进行修正
			if (xmlHttpRequest.overrideMimeType) {
				xmlHttpRequest.overrideMimeType("text/xml");
			}
		} else if (window.ActiveXObject) {
			//针对IE6，IE5.5，IE5
			//两个可以用于创建XMLHTTPRequest对象的控件名称，保存在一个js的数组中
			//排在前面的版本较新
			var activexName = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];
			for ( var i = 0; i < activexName.length; i++) {
				try {
					//取出一个控件名进行创建，如果创建成功就终止循环
					//如果创建失败，回抛出异常，然后可以继续循环，继续尝试创建
					xmlHttpRequest = new ActiveXObject(activexName[i]);
					break;
				} catch (e) {
				}
			}
		}
		//确认XMLHTtpRequest对象是否创建成功
		if (!xmlHttpRequest) {
			alert("XMLHttpRequest对象创建失败!!");
			return false;
		} else {
			//0 - 本地响应成功
			//alert(xmlhttp.readyState);
			return true;
		}
	}
</script>
  </head>
  
  <body>
    	请输入要验证的用户名字(输入admin试试)：<br/>
    	<input type="text" id="username"/><input type="button" value="校验" onclick="verify()"/>
    	<div id="result"></div>
  </body>
</html>

 和servlet交互的，OriginalityAjaxAction.java代码如下：

package web.action;
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;
//对原始的ajax页面请求的控制器
public class OriginalityAjaxAction extends HttpServlet {

	private static final long serialVersionUID = 1978049925174268801L;

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		this.doPost(request, response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		
		String username = request.getParameter("username");
		response.setCharacterEncoding("UTF-8");
		PrintWriter out = response.getWriter();
		//将数据返回给页面
		if(username.equals("admin")){
			out.print("用户：[admin]已经被使用了");
		}else{
			out.print("用户：[" + username + "]可以使用");
		}
	}

}

 web.xml的servlet配置如下：

<servlet>
    <servlet-name>OriginalityAjaxAction</servlet-name>
    <servlet-class>web.action.OriginalityAjaxAction</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>OriginalityAjaxAction</servlet-name>
    <url-pattern>/OriginalityAjaxAction</url-pattern>
  </servlet-mapping>

 以上简单的页面和servlet交互，返回一个字符串结果。

下面进行扩展，解析servlet返回的xml数据，为了保证代码的完整性，下面列出完整代码：

originalityAjaxXml.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>最原始的ajax解析xml数据写法</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<script type="text/javascript">
	
	//这个方法将使用XMLHTTPRequest对象来进行AJAX的异步数据交互
	var xmlHttpRequest;

	//读取后台xml数据的方法
	function readxml() {
		var success = createXMLHTTPRequest();
		if (!success) {
			return;
		}
		
		//2.注册回调函数
		//注册回调函数时，之需要函数名，不要加括号
		//我们需要将函数名注册，如果加上括号，就会把函数的返回值注册上，这是错误的
		xmlHttpRequest.onreadystatechange = callback;

		//3。设置连接信息
		//第一个参数表示http的请求方式，支持所有http的请求方式，主要使用get和post
		//第二个参数表示请求的url地址，get方式请求的参数也在url中
		//第三个参数表示采用异步还是同步方式交互，true表示异步


		//POST方式请求的代码
		xmlHttpRequest.open("POST", "OriginalityAjaxXmlAction", true);
		//POST方式需要自己设置http的请求头
		xmlHttpRequest.setRequestHeader("Content-Type",
				"application/x-www-form-urlencoded");
		//POST方式发送数据
		

		//4.发送数据，开始和服务器端进行交互
		//同步方式下，send这句话会在服务器段数据回来后才执行完
		//异步方式下，send这句话会立即完成执行
		xmlHttpRequest.send(null);

	}

	//回调函数
	function callback() {
		//5。接收响应数据
		//判断对象的状态是交互完成
		if (xmlHttpRequest.readyState == 4) {
			//判断http的交互是否成功
			if (xmlHttpRequest.status == 200) {
				//获取服务器器端返回的数据
				//获取服务器段输出的纯文本数据
				var rootNode = xmlHttpRequest.responseXML;;
				//利用getElementsByTagName可以根据标签名来获取元素节点，返回的是一个数组
				var productNodes = rootNode.getElementsByTagName("product");
				
				//将获取到的内容解析成表格显示
				for(var i=0;i<productNodes.length;i++){//创建行数
					var product = document.createElement("TR");
					//每行8的td标签
					var name = document.createElement("TD");
					name.appendChild(document.createTextNode(productNodes[i].getElementsByTagName("name")[0].firstChild.nodeValue));//给name赋值
					var description = document.createElement("TD");
					description.appendChild(document.createTextNode(productNodes[i].getElementsByTagName("description")[0].firstChild.nodeValue));
					var price = document.createElement("TD");
					price.appendChild(document.createTextNode(productNodes[i].getElementsByTagName("price")[0].firstChild.nodeValue));
					var image = document.createElement("TD");
					image.appendChild(document.createTextNode(productNodes[i].getElementsByTagName("image")[0].firstChild.nodeValue));
					var series = document.createElement("TD");
					series.appendChild(document.createTextNode(productNodes[i].getElementsByTagName("series")[0].firstChild.nodeValue));
					var triband = document.createElement("TD");
					triband.appendChild(document.createTextNode(productNodes[i].getElementsByTagName("triband")[0].firstChild.nodeValue));
					var camera = document.createElement("TD");
					camera.appendChild(document.createTextNode(productNodes[i].getElementsByTagName("camera")[0].firstChild.nodeValue));
					var video = document.createElement("TD");
					video.appendChild(document.createTextNode(productNodes[i].getElementsByTagName("video")[0].firstChild.nodeValue));
					//将所有的td依附到tr上去
					product.appendChild(name);
					product.appendChild(description);
					product.appendChild(price);
					product.appendChild(image);
					product.appendChild(series);
					product.appendChild(triband);
					product.appendChild(camera);
					product.appendChild(video);
					document.getElementById("productBody").appendChild(product); 
					
				}
			} else {
				alert("出错了！！！");
			}
		}
	}

	//创建XMLHTTPRequest对象来进行AJAX的异步数据交互
	function createXMLHTTPRequest() {
		//1.创建XMLHttpRequest对象
		//这是XMLHttpReuquest对象无部使用中最复杂的一步
		//需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码

		if (window.XMLHttpRequest) {
			//针对FireFox，Mozillar，Opera，Safari，IE7，IE8
			xmlHttpRequest = new XMLHttpRequest();
			//针对某些特定版本的mozillar浏览器的BUG进行修正
			if (xmlHttpRequest.overrideMimeType) {
				xmlHttpRequest.overrideMimeType("text/xml");
			}
		} else if (window.ActiveXObject) {
			//针对IE6，IE5.5，IE5
			//两个可以用于创建XMLHTTPRequest对象的控件名称，保存在一个js的数组中
			//排在前面的版本较新
			var activexName = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];
			for ( var i = 0; i < activexName.length; i++) {
				try {
					//取出一个控件名进行创建，如果创建成功就终止循环
					//如果创建失败，回抛出异常，然后可以继续循环，继续尝试创建
					xmlHttpRequest = new ActiveXObject(activexName[i]);
					break;
				} catch (e) {
				}
			}
		}
		
		//确认XMLHTtpRequest对象是否创建成功
		if (!xmlHttpRequest) {
			alert("XMLHttpRequest对象创建失败!!");
			return false;
		} else {
			//0 - 本地响应成功
			//alert(xmlhttp.readyState);
			return true;
		}
	}
	
</script>

  </head>
  
  <body>
    	读取服务器的xml数据:
    	<input type="button" value="读取" onClick="readxml()"/><br/>
    	解析xml数据为表格的形式：<br/>
    	<table border="1" id="productTable">
    		<tbody id="productBody">
    		<tr>
    			<td>name</td>
    			<td>description</td>
    			<td>price</td>
    			<td>image</td>
    			<td>series</td>
    			<td>triband</td>
    			<td>camera</td>
    			<td>video</td>
    		</tr>
    		</tbody>
    	</table>
    	
		
		
  </body>
</html>

 后台的catalog.xml数据代码：

<?xml version="1.0" encoding="utf-8"?>
<catalog>

    <product productId="1">
        <name>Nokia 6010中文的哈</name>
        <description>Easy to use without sacrificing style, the Nokia 6010 phone offers functional voice communication supported by text messaging, multimedia messaging, mobile internet, games and more</description>
        <price>99.99</price>
        <image>Nokia_6010.gif</image>
        <series>6000</series>
        <triband>false</triband>
        <camera>false</camera>
        <video>false</video>
        <highlight1>MMS</highlight1>
		<highlight2>Large color display</highlight2>
		<qtyInStock>2</qtyInStock>
    </product>

    <product productId="2">
        <name>Nokia 3100 Blue</name>
        <description>Light up the night with a glow-in-the-dark cover - when it's charged with light you can easily find your phone in the dark. When you get a call, the Nokia 3100 phone flashes in tune with your ringing tone. And when you snap on a Nokia Xpress-onâ„¢ gaming cover*, you'll get luminescent light effects in time to the gaming action.</description>
        <price>139</price>
        <image>Nokia_3100_blue.gif</image>
        <series>3000</series>
        <triband>true</triband>
        <camera>false</camera>
        <video>false</video>
        <highlight1>Glow-in-the-dark</highlight1>
		<highlight2>Flashing lights</highlight2>
		<qtyInStock>1</qtyInStock>
    </product>

    <product productId="3">
        <name>Nokia 3100 Pink</name>
        <description>Light up the night with a glow-in-the-dark cover - when it's charged with light you can easily find your phone in the dark. When you get a call, the Nokia 3100 phone flashes in tune with your ringing tone. And when you snap on a Nokia Xpress-onâ„¢ gaming cover*, you'll get luminescent light effects in time to the gaming action.</description>
        <price>139</price>
        <image>Nokia_3100_pink.gif</image>
        <series>3000</series>
        <triband>true</triband>
        <camera>false</camera>
        <video>false</video>
        <highlight1>Glow-in-the-dark</highlight1>
		<highlight2>Flashing lights</highlight2>
		<qtyInStock>7</qtyInStock>
    </product>

    <product productId="4">
        <name>Nokia 3120</name>
        <description>Designed for both business and pleasure, the elegant Nokia 3120 phone offers a pleasing mix of features. Enclosed within its chic, compact body, you will discover the benefits of tri-band compatibility, a color screen, MMS, XHTML browsing, cheerful screensavers, and much more.</description>
        <price>159.99</price>
        <image>Nokia_3120.gif</image>
        <series>3000</series>
        <triband>true</triband>
        <camera>false</camera>
        <video>false</video>
        <highlight1>Multimedia messaging</highlight1>
		<highlight2>Animated screensavers</highlight2>
		<qtyInStock>15</qtyInStock>
    </product>

    <product productId="5">
        <name>Nokia 3220</name>
        <description>The Nokia 3220 phone is a fresh new cut on some familiar ideas - animate your MMS messages with cute characters, see the music with lights that flash in time with your ringing tone, download wallpapers and screensavers with matching color schemes for the interface.</description>
        <price>159.99</price>
        <image>Nokia_3220.gif</image>
        <series>3000</series>
        <triband>false</triband>
        <camera>true</camera>
        <video>false</video>
        <highlight1>MIDI tones</highlight1>
		<highlight2>Cut-out covers</highlight2>
		<qtyInStock>5</qtyInStock>
    </product>

</catalog>

 

OriginalityAjaxXmlAction.java代码如下：

package web.action;
import java.io.File;
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;

import org.dom4j.Document;
import org.dom4j.DocumentException;
import org.dom4j.io.SAXReader;
//对原始的ajax页面请求的控制器
//返回xml格式的数据
public class OriginalityAjaxXmlAction extends HttpServlet {

	private static final long serialVersionUID = 1978049925174268801L;

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		this.doPost(request, response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		response.setContentType("text/xml;charset=utf-8");
		response.setHeader("Cache-Control", "no-cache");
		String path  = request.getSession().getServletContext().getRealPath("/") + "catalog.xml";
		PrintWriter out = response.getWriter();
		
		 SAXReader saxReader = new SAXReader(); 
         Document document = null;
		try {
			document = saxReader.read(new File(path));
		} catch (DocumentException e) {
			e.printStackTrace();
		}
		 
         String xml = document.asXML();
         System.out.println(xml);
         out.print(xml);
	}

}

 完整例子代码下载:ajaxDemo.rar (750.3 KB)

 

分享到：
| FMS3系列(四)：在线视频录制、视频回放
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    使用XMLHTTPRequest实现自定义ajax。javascript闭包模式写法。值的学习

    在实际的Ajax应用中，服务器通常会返回JSON格式的数据，而不是原始的XML。为此，我们需要在客户端解析JSON。JavaScript提供了全局函数`JSON.parse()`，用于将JSON字符串转换为JavaScript对象，例如： ```javascript...

    html+js+php一次原始的Ajax请求示例

    今天给大家呈现一个原始的Ajax请求过程，虽然jquery的ajax要比原始的写法容易得多，我们还是应该了解原始的写法，下面我分为html、js、php三个小文件来展示，数据库自己写。 首先是html： 代码如下: &lt;html&gt; &...

    jquery常用方法总结

    - **`$("#ID#ID")`**：这种写法是不正确的，如果想通过一个 ID 获取元素，只需使用 `$("#ID")` 即可。 - **`$("标签.class名")`**：通过类名获取元素。例如 `$("div.exampleClass")` 将返回所有带有类名为 `...

    $.ajax返回的JSON无法执行success的解决方法

    在原始的例子中，JSON字符串写成了： ```json {result:{\"success\":\"true\",\"meg\":\"success\"}} ``` 这种写法有两个问题： 1. 键`result`后面的对象没有用双引号包围。 2. 键`meg`的拼写错误，应该是`msg`。 ...

    bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能

    如图，这是使用Validator插件，所完成的功能，效果很强大，也很方便，这边推荐使用这种方式，最后介绍一下原始js验证写法。 首先，导入插件： &lt;link href=&lt;&#37;=basePath %&gt;bootstrap/css/bootstrap-...

    learnjQuery:jQuery API的使用以及jQuery原始解析

    这种写法既紧凑又易读。 在DOM操作方面，jQuery有`append()`、`prepend()`、`before()`和`after()`等方法，可以方便地向元素内部插入内容。同时，`remove()`和`empty()`用于删除或清空元素内容。此外，`clone()`则...

    Unnotech-Project

    非技术专案执行导入repo自github clone下来或直接下载zip档，获取之后于终端执行npm ...使用Axios可以减少掉ajax原始写法的扩展长像是发出XMLHttpRequest等，除后之外，直接将回传的JSON资料转换成Object。 Tailwind

    JQuery权威指南源代码

    jQuery事件的链式写法 控制jQuery对象 jQuery控制CSS样式 第2章 使用JavaScript实现隔行变色 使用jQuery选择器实现隔行变色 JavaScript代码检测页面元素 jQuery代码检测页面元素 使用jQuery基本选择器 使用...

    网络编程基础篇之Javascript(EXE)

    9. **AJAX（异步JavaScript和XML）**：AJAX允许在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容，是实现网页动态性的关键技术。 10. **Promise和Async/Await**：Promise是处理异步操作的工具，解决回...

    javascript 手册

    1. **基础语法**：包括变量（var, let, const）、数据类型（原始类型如字符串、数字、布尔，以及引用类型如对象、数组、null和undefined）、运算符（算术、比较、逻辑、位运算等）和控制结构（条件语句、循环语句）...

    详解vue模拟加载更多功能（数据追加）

    `concat`会创建一个新的数组，包含所有输入数组的元素，而不会改变任何原始数组。因此，正确的写法如下： ```javascript $.ajax({ type: 'get', async: false, url: path + 'no/noticeMobile/getSendNoticeList?...

    即用即查JavaScript

    数据类型有原始类型（如字符串、数字、布尔值、null和undefined）和引用类型（如对象）。运算符包括算术、比较、逻辑、赋值等。语句如条件语句（if...else）、循环（for、while）、开关（switch）和跳转（break、...

    ES7中利用Await减少回调嵌套的方法详解

    在回调地狱的例子中，我们看到原始的代码需要在每个回调中编写新的回调，导致代码缩进层次过多。通过Promise，我们可以将回调移至`then`方法中，这在一定程度上改善了代码结构，如： ```javascript new Promise...

    jQuery中的deferred对象和extend方法详解

    在使用deferred对象进行AJAX操作时，可以实现链式写法，极大地提高了代码的可读性和组织性。例如，传统写法： ```javascript $.ajax({ url: "test.html", success: function() { alert("哈哈，成功了！"); }, ...

    JavaScript 语言用法指南，语法详细介绍，中文版的哦

    2. 数据类型：JavaScript有七种数据类型，包括原始类型（Undefined、Null、Boolean、Number、BigInt、String、Symbol）和引用类型（Object）。 3. 字符串：字符串是不可变的，可以通过模板字符串（模板字面量）使用...

    JavaScript技术讲座

    它有七种原始数据类型：Undefined、Null、Boolean、Number、BigInt、String和Symbol，以及一种复合类型——Object。 2. **控制流**：包括条件语句（如if...else）和循环（如for、while和do...while），它们帮助程序...

    JavaScript语言教程&案例&相关项目资源

    - **数据类型**：原始类型（如字符串、数字、布尔值）和引用类型（如对象、数组）。 - **操作符**：算术、比较、逻辑等操作符。 ##### 控制流程 - **条件语句**：`if-else`、`switch`语句。 - **循环结构**：`for`...

    jQuery实现获取绑定自定义事件元素的方法

    在JavaScript的世界里，jQuery库是广泛使用的工具，它简化了DOM操作、事件处理以及Ajax交互。在本例中，我们将探讨如何使用jQuery实现一个自定义事件`itemtab`，并学习如何获取绑定此事件的元素。这个功能对于构建...

Magicbox
Global site tag (gtag.js) - Google Analytics