1.+Shang Silicon Valley_Tong Gang_Ajax_Overview.wmv
2.+Shang Silicon Valley_Tong Gang_Ajax_Use+XMLHttpRequest+implementation+Ajax.wmv
The XMLHttpRequest object provides full access to the HTTP protocol, including the ability to make POST and HEAD requests as well as normal GET requests. XMLHttpRequest can return a response from a Web server synchronously or asynchronously, and can return content in the form of text or a DOM document.
Next, let's implement a helloword heart to create a Java web dynamic project
We have a hello.txt file in the webRoot directory
The content of the file is as follows
hello ajax!!!
We add an a tag in the index.jsp directory. When clicking the a tag in the browser page, we use ajax to access the server segment hello.txt file, and display the value of the file in the alert.
The content of index.jsp is as follows
<%@ 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 > <!-- Ajax is not implemented using the jquery framework --> <!-- --> < script type ="text/javascript" > // After the page is loaded, the window.onload = function() function will be called window.onload = function ( ) { // Get the first node of the a element and add the click event // Get the first node of the a element, add the click event document.getElementsByTagName( " a " )[ 0 ].onclick = function (){ // 2 Create an XMLHTTPrequest object var request = new XMLHttpRequest(); // The requested url is the href attribute of the current dom object var url = this .href; // The request method using get var method = " GET " ; // 4 Call the open method of the object request.open(method, url); // 5 call the send method to send the request request.send( null ); // 6 add a response function to the object request.onreadystatechange = function (){ // Judging whether the response is complete if (request.readyState == 4 ){ //Checking whether the response is available if (request.status == 200 || request.status == 304 ){ // The default return value is the problem type , print out the returned results, here you can also return data in json or xml format alert(request.responseText); } } } return false; } } </script> </head> < body > <!-- Add an a tag to display the content of hello.txt in the dialog box using ajax --> < a href ="${pageContext.request.contextPath }/hello.txt " > Display Content </a> < / body > < / html >
running result
When you click on the displayed content, the corresponding content will pop up