zoukankan      html  css  js  c++  java
  • Ajax学习整理笔记

        AJAX技术的出现使得javascript技术大火。不懂AJAX的同学百度一下,了解AJAX能做什么就可以了。

    代码:

        

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Ajax</title>
    <script type="text/javascript">
    
    	window.onload=init;
    	function init(){
    		var btn = document.getElementById("getData");
    		btn.onclick = getData;
    	}
    	
    	function getData(){
    		//利用ajax获取数据步骤
    		//1:创建XMLHttpRequest对象,在IE浏览器中版本低于7的情况获取的这个对象不是XMLHttpRequest,我们可以用一个工程的函数来实现(屏蔽不同浏览器之间的对象的创建)
    		
    		var xhr = createXMLHttpRequest();
    	    alert(xhr);
    		
    		//2:检测XMLHttpRequest对象的状态,在合适的地方处理
    		
    		//通过open方法确定要访问的页面1个参数请求类型,2提交路劲,3个参数是是否异步
    		xhr.open("GET","AjaxServlet",true);
    		
    		//在onreadystatechange事件中处理请求
    		xhr.onreadystatechange = function(){
    			//onreadystatechange在每个阶段都进行响应,在状态等于4的时候请求结束并且state=200
    			if (xhr.readState == 4 && xhr.status == 200) {
    				//获取相应的文本信息通过xhr的resposeText可以获取文本信息,包括xml的标签
    				//通过responseXML可以获取xml的信息,只能xml对象
    				document.getElementById("saveData").innerHTML = xhr.responseText;
    			}
    		}
    		
    		//3:发送请求,send函数可以传入相应的参数,这个参数必须是post请求的方式才有效,get请求直接在请求地址中拼接比如send("id=XXX & name=XXX")
    		xhr.send();
    	}
    	
    	function createXMLHttpRequest(){
    		if (window.ActiveXObject) {
    			//针对ie5,6
    			return new ActiveXObject("Microsoft.XMLHTTP");
    		} else if (window.XMLHttpRequest){
    			//其他主流浏览器
    			return new XMLHttpRequest();
    		}else {
    			alert("你使用的浏览器不支持XMLHttpRequest");
    			return null;
    		}
    	}
    	
    
    
    </script>
    </head>
    <body>
    
    	<input type="button" value="获取数据" id= "getData">
    	
    	<div id="saveData"></div>
    
    
    </body>
    </html>
    
    
    后台代码:
    package com.study.servlet;
    
    import java.io.IOException;
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    public class AjaxServlet extends HttpServlet {
    	private static final long serialVersionUID = 1L;
    
    	
    	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		this.doPost(request, response);
    	}
    
    	
    	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		System.out.println("ajax come");
    		response.getWriter().write("AJAX");
    	}
    
    }
    
  • 相关阅读:
    我的VIM.rc
    汉字编码
    儿童绘本
    禁用Linux bash rm --force
    English Audio-Books
    谱曲软件-MuseScore
    redis cluster 的ERR max number of clients reached 问题排查
    mycat引起的insert后马上select不到数据的故障分析
    生产环境elasticsearch
    docker kafka 修改hostname导致的问题
  • 原文地址:https://www.cnblogs.com/airycode/p/4823083.html
Copyright © 2011-2022 走看看