Ajax(学习笔记）

时间 2019-12-08

标签 ajax 学习笔记栏目 Ajax 繁體版

原文原文链接

何为Ajax

英文：Asynchronous JavaScript and XML 意思是异步JavaScript和XML。客户端与服务端在不刷新整个浏览器的状况下，与服务器进行异步通信的技术,实际上是几种技术的融合javascript

XHTML和CSS的基于标准的表示技术html
DOM进行动态显示和交互java
XML和XSLT进行数据交换和处理ajax
XMLHttpRequest进行异步数据检索数据库
Javascript将以上技术融合在一块儿浏览器

使用Ajax的缘由

未使用Ajax时我们的网页若是想要刷新局部内容。那么须要从新载入整个网页。用户体验不是很好。 Ajax就是为了解决局部刷新的问题。保持其余部分不动，只刷新某些地方。缓存

使用Ajax

建立XMLHttpRequest对象

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

向服务器发送请求如需将请求发送到服务器，咱们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
复制代码

GET 仍是 POST？与 POST 相比，GET更简单也更快，而且在大部分状况下都能用。然而，在如下状况中，请使用 POST 请求：bash

没法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

Async = true

当使用 async=true 时，请规定在响应处于 onreadystatechange事件中的就绪状态时执行的函数：服务器

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    	alert(request.responseText);
    }
  }
复制代码

GET请求

Demo1.jspapp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

<script type="text/javascript">
  function ajaxFunction(){
	   var xmlHttp;
	   try{ // Firefox, Opera 8.0+, Safari
	        xmlHttp=new XMLHttpRequest();
	    }
	    catch (e){
		   try{// Internet Explorer
		         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		      }
		    catch (e){
		      try{
		         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		      }
		      catch (e){}
		      }
	    }
		return xmlHttp;
	 }
  function get(){
    //1.建立xmlhttprequest对象
     var request=ajaxFunction();

     //发送请求
     request.open("GET","/day16/DemoServlet01?name=aa&&age=18",true);
     request.send();
     
    //3.当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数
     request.onreadystatechange=function(){	
    	if(request.readyState==4&&request.status==200){
    		alert(request.responseText);
    	}
    }
  }
  </script>
</head>
<body>
	<h3>
		<a herf="" onclick="get()">使用Ajax方式发送Get请求</a>
	</h3>
</body>
</html>
复制代码

ServletDemo01.java

package com.itklz;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class ServletDemo01
 */
public class ServletDemo01 extends HttpServlet {
	private static final long serialVersionUID = 1L;
   
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		System.out.println("收到了一个请求----");
		response.setContentType("text/html;charset=UTF-8");
		response.getWriter().write("收到了一个请求");
	}

	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		doGet(request, response);
	}

}
复制代码

运行结果

POST请求

Demo02.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

   <script type="text/javascript">
   
   function ajaxFunction(){
	   var xmlHttp;
	   try{ // Firefox, Opera 8.0+, Safari
	        xmlHttp=new XMLHttpRequest();
	    }
	    catch (e){
		   try{// Internet Explorer
		         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		      }
		    catch (e){
		      try{
		         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		      }
		      catch (e){}
		      }
	    }

		return xmlHttp;
	 }
   function post(){
	  //1.建立XmlHttpRequest对象
	   var xmlHttp=ajaxFunction();
	   xmlHttp.onreadystatechange=function()
       {
       if (xmlHttp.readyState==4 && xmlHttp.status==200)
         {
       	alert(xmlHttp.responseText);
         }
       }
	  //2.向服务器发送请求
	  xmlHttp.open("POST","/D16/ServletDemo01",true);
	  //若是须要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。而后在 send() 方法中规定您但愿发送的数据：
     xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	  xmlHttp.send(); 
   }
   </script>
</head>
<body>
  <h1><a href="" onclick="post()">使用Ajax使用Post请求</a></h1>
</body>
</html>
复制代码

ServletDemo01.java

package com.itklz;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class ServletDemo01
 */
public class ServletDemo01 extends HttpServlet {
 
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		System.out.println("收到了一个请求----");
		response.setContentType("text/html;charset=UTF-8");
		response.getWriter().write("收到了一个请求");
	}
	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		System.out.println("收到请求，执行get方法");
		doGet(request, response);
	}

}
复制代码

运行结果

在POST请求中send()方法能够传入参数xmlhttp.send("fname=Bill&lname=Gates")

若有错误请指正，感谢