Ajax基本使用

最新推荐文章于 2023-01-11 23:32:18 发布

龙腾四海365

最新推荐文章于 2023-01-11 23:32:18 发布

阅读量354

点赞数

分类专栏： ajax

本文链接：https://blog.csdn.net/u011637069/article/details/50839703

版权

ajax 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

=======Ajax基本使用==========

#什么是Ajax,优点,什么时候用

全称：Asynchronous JavaScript and XML

异步的JavaScript和XML应用

Ajax请求，服务器返回的是纯数据,不是HTML页面

浏览器发请求1--->Tomcat服务器处理-->返回给浏览器

浏览器发请求2--->Tomcat服务器处理-->返回给浏览器

异步特点：请求2可以在请求1没处理返回情况下发出

优点：异步处理;

提升用户体验(在页面不刷新情况下,处理请求,改变页面部分显示)

提升请求的处理效率

选用标准：避免整个页面频繁刷新;实现局部处理刷新

#Ajax使用

XMLHttpRequest作用：发送请求,接收响应结果（内置在浏览器）

##XMLHttpRequest对象使用

-new XMLHttpRequest();//firefox,chrome

-new ActiveXObject("Microsoft.XMLHttp");//IE

-open(请求类型,url,同步异步);//创建请求

-send(post数据);//发送请求

-responseText;//获取服务器返回的内容

-responseXML;//获取服务器返回的XML内容

-readyState;//Ajax请求处理状态0-4

0:请求未初始化,1:请求未发送;2:请求发送完毕 3:请求正在处理;4:请求处理完毕

-onreadystatechange:事件

-status;//服务器响应HTTP CODE 200正确

#示例代码

demo1.html

<html>
  <head>
    <title>demo1.html</title>	
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
      //获取XMLHttpRequest对象
      function getXhr(){
        var xhr = null;
        if(window.XMLHttpRequest){
          xhr = new XMLHttpRequest();
        }else{
          xhr = new ActiveXObject("Microsoft.XMLHttp");
        }
        return xhr;
      }
      
      //发送请求
      function sendRequest1(){
        var xhr = getXhr();//获取XMLHttpRequest对象
        //alert(xhr);
        
        xhr.open("get","hello.do",true);//创建请求
        
        //注册回调函数
        xhr.onreadystatechange = function(){
          //解析结果，刷新页面处理
          //alert(xhr.readyState)
          if(xhr.readyState==4 && xhr.status==200){
            var msg = xhr.responseText;//获取返回的信息
            alert(msg);
          }
        }
        
        //参数对post有效,get写null
        xhr.send(null);//发送请求
      }
    </script>
    <script type="text/javascript">
      //失去焦点时，用户名检测 
      function sendRequest2(){
        //获取请求参数
        var name = document.getElementById("name").value;
        //alert(name);
        var s1 = document.getElementById("name_span");
        if(name==""){
          s1.innerHTML = "用户名为空";
          return ;
        }
        
        //发送ajax请求
        var xhr = getXhr();
        //alert(xhr);
        //var url = "check.do?name="+name;
        //xhr.open("get",url,true);
        xhr.open("post","check.do",true);
        //post请求时，须添加此消息头，否则参数为null
        xhr.setRequestHeader("content-type",
            "application/x-www-form-urlencoded");
        
        xhr.send("name="+name+"&age=1");
        //友好提示
        s1.innerHTML = "正在检测...";
        
        xhr.onreadystatechange = function(){
          //alert(xhr.readyState);
          if(xhr.readyState==4&&xhr.status==200){
             var msg = xhr.responseText;
             s1.innerHTML = msg;
          }
        };
      }
    </script>
  </head>
  
  <body>
    <input type="button" id="btn1" value="发送ajax请求"
      οnclick="sendRequest1();"/>
    <hr/>
    <input type="text" id="name" οnblur="sendRequest2();"/>
    <span id="name_span"></span>
  </body>
</html>

HelloServlet.java

package com.ajax.servlet;

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;

public class HelloServlet extends HttpServlet {

	@Override
	protected void service(HttpServletRequest req, HttpServletResponse res)
			throws ServletException, IOException {
		res.setContentType("text/html;charset=utf-8");
		PrintWriter pw = res.getWriter();
		System.out.println("哈喽 ajax");
		pw.print("哈喽 ajax");
		pw.close();
	}
	
}

CheckServlet.java

package com.ajax.servlet;

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;

public class CheckServlet extends HttpServlet{

	@Override
	protected void service(HttpServletRequest req, HttpServletResponse res)
			throws ServletException, IOException {
		req.setCharacterEncoding("utf-8");
		res.setContentType("text/html;charset=utf-8");
		//接收请求参数
		String name = req.getParameter("name");
		//get解决乱码方法
		//name = new String(name.getBytes("iso8859-1"),"utf-8");
		System.out.println(name);
		String age = req.getParameter("age");
		System.out.println(age);
		
		try {
			Thread.sleep(3000);
		} catch (InterruptedException e) {
			e.printStackTrace();
		}
		
		//检查
		PrintWriter pw = res.getWriter();
		if("scott".equals(name)){
			//用户名被占用
			pw.print(name+":用户名被占用");
		}else{
			//用户名可用
			pw.print(name+":用户名可用");
		}
		pw.close();
	}
	
}

龙腾四海365

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax基本使用

=======Ajax基本使用==========#什么是Ajax,优点,什么时候用全称：Asynchronous JavaScript and XML异步的JavaScript和XML应用Ajax请求，服务器返回的是纯数据,不是HTML页面浏览器发请求1--->Tomcat服务器处理-->返回给浏览器浏览器发请求2--->Tomcat服务器处理-->返回给浏览
复制链接

扫一扫

专栏目录