The ajax function of jQuery simulated by Cui Xifan

   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("Man, what browser are you using?");
	          throw e;
function ajax(option) {
	//1. Get xmlHttp
	var xmlHttp = createXMLHttpRequest();
	 //2. Open connection
	if(!option.method) {//GET request by default
		option.method = "GET";
	if(option.asyn == undefined) {//Asynchronous processing by default
		option.asyn = true;
	}, option.url, option.asyn);
	 //3. Judge whether it is POST
	if("POST" == option.method) {
		xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	 // 4. Send request
	 // 5. Register to listen
	xmlHttp.onreadystatechange = function() {
		if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {//Double judgement
			var data;
			// Get the response data of the server and convert it!
			if(!option.type) {//If the type is not assigned, the default is text
				data = xmlHttp.responseText;
			} else if(option.type == "xml") {
				data = xmlHttp.responseXML;
			} else if(option.type == "text") {
				data = xmlHttp.responseText;
			} else if(option.type == "json") {
				var text = xmlHttp.responseText;
				data = eval("(" + text + ")");
			// Call callback method

ajax principle paste

  1. Step 1 (get XMLHttpRequest)
  • In fact, ajax only needs to learn one object: XMLHttpRequest. If you master it, you will master ajax!!!

  • Get XMLHttpRequest
    Most browsers support: var xmlHttp = new XMLHttpRequest();
    IE6.0: var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    IE5.5 and earlier IE: var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

  • To deal with browser compatibility, write the function to create the XMLHttpRequest object, the upper board

  1. Step 2 (open connection to server)
  • used to open a connection with the server, it needs three parameters:

    Request mode: can be GET or POST
    Requested URL: Specifies the server-side resource, for example; / day23 / aservlet
    Whether the request is asynchronous: if it is true, it means sending asynchronous request, otherwise synchronous request!

  •"GET", "/day23_1/AServlet", true);
  1. Step 3 (send request)
  • xmlHttp.send(null): if it is not given, some browsers may not be able to send it!

    Parameter: request body content! In case of GET request, null must be given.

  1. Step 4 register the listener on an event of the xmlHttp object: onreadystatechange
  • The xmlHttp object has 5 states in total:
    0 status: just created, no open() method has been called;
    1 status: request start: open() method called, but send() method not yet called
    2 status: the send() method has been called;
    3 status: the server has started to respond, but it does not mean that the response is over!
    4 status: end of server response! (usually we only care about this state!!!)

  • Get the state of the xmlHttp object:

    var state = xmlHttp.readyState;//Could be 0, 1, 2, 3, 4

  • Get the status code of the server response

    var status = xmlHttp.status;//For example, 200, 404, 500

  • Get content of server response 1

    var content = xmlHttp.responseText;//Get the text content of the server's response
    var content = xmlHttp.responseXML;//Get the content of the xml response of the server's response. It's a Document object!

    Final code

xmlHttp.onreadystatechange = function() {//This method will be called in five states of xmlHttp
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {//Double judge: judge whether the state is 4, and also judge whether it is 200
// Get the response content of the server
var text = xmlHttp.responseText;

Here is the code for the jsp exercise

User name<input id="text1" type="text" name="user" onblur="f1()"><span id="span1"></span>
function f1() {
	var xhr = new XMLHttpRequest();"GET", "/web/Ajax", true);
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && xhr.status == 200 &&document.getElementById("text1").value=="Wang Xi Lai") {
			var text = xhr.responseText.fontcolor("red");

servle code

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

	PrintWriter out = response.getWriter();


Final renderings

post request practice is a little different

When uploading the get form

There is no content type, so it can be seen that when uploading form data, it will automatically process, which is a big difference between post and get

post Practice

jsp page


Osaka 11031 Published 3 original articles, won praise 0, visited 27 Private letter follow