使用原生AJAX请求数据

一、什么是AJAX

AJAX英文全称 Asynchronous Javascript And XML（异步的JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，用于浏览器和服务器之间进行数据交互。AJAX在浏览器与Web服务器之间使用异步数据传输（HTTP请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。AJAX描述了一种主要使用脚本操作HTTP的Web应用架构，AJAX应用的主要特点是使用脚本操纵HTTP和Web服务器进行数据交换，不会导致页面重载。

AJAX是异步的JavaScript和XML;

AJAX是一种用于创建更好更快以及交互性更强的Web应用程序的技术;
AJAX是一种独立于Web服务器软件的浏览器技术;
AJAX不是一种新的编程语言，而是一种技术;
AJAX 使用 JavaScript 在 web 浏览器与 web 服务器之间来发送和接收数据（前端后端交互）;
AJAX在浏览器与Web服务器之间使用异步数据传输（HTTP请求）。

二、AJAX请求数据的步骤

浏览器在XMLHttpRequest类上定义了它们的HTTP API，这个类的每个实例都表示一个独立的请求/响应对，并且这个对象的属性和方法允许指定请求细节和提取响应数据。
XMLHttpRequest对象是AJAX的基础，XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。目前所有浏览器都支持XMLHttpRequest。

步骤：

1. 第一步：创建XMLHttpRequest的实例对象

var xhr = new XMLHttpRequest();

2. 第二步：xhr.open(提交方式,url,true)

第二步参数详解：
第一个参数：
指定HTTP方法或动作，这个字符串不区分大小写，通常大家用大写字母来匹配HTTP协议。
取值有：GET、POST、HEAD、DELETE、OPTIONS、PUT
我们一般常用的有GET和POST请求：
GET：用于常规请求，适用于URL完全指定请求资源，请求对服务器没有任何副作用，服务器的响应是可缓存的。
POST：用于HTML表单，它在请求主体中包含额外数据，且这些数据常存储到服务器上的数据库中。相同URL的重复POST请求从服务器得到的响应可能不同，同时不应该缓存使用这个方法的请求。
第二个参数：
URL，它是请求的主体，是相对于文档的URL。跨域请求会报错。
第三个参数：
Boolean类型的值，如果值为false代表同步请求，send()方法将阻塞直到请求完成。如果这个参数是 true 或省略，则表示请求是异步的。
xhr.open(‘get’,‘http://127.0.0.1:8080/MyMavenProject_war/UserinfoServlet?user_key=fd3270a0a9833e20’)

3. 第三步：设置请求头 xhr.setRequestHeader()

在AJAX中，如果需要像 HTML 表单那样 POST 数据，需要使用 setRequestHeader() 方法来添加 HTTP 头。
然后在 send() 方法中规定需要希望发送的数据：setRequestHeader()方法需要在open()和send()方法之间调用。
语法：
xhr.setRequestHeader(属性名称, 属性值);
使用：
（1）发送json格式数据：
xhr.setRequestHeader(‘Content-type’, ‘application/json; charset=utf-8’);
（2）发送表单数据：
xhr.setRequestHeader(‘Content-type’, ‘application/x-www-form-urlencoded; charset=utf-8’);
（3）发送纯文本(不指定Content-type时，此是默认值)：
xhr.setRequestHeader(‘Content-type’, ‘text/plain; charset=utf-8’);
（4）发送html文本：
xhr.setRequestHeader(‘Content-type’, ‘text/html; charset=utf-8’);

4. 第四步：发送请求 xhr.send()

send()方法
参数：
请求主体内容。如果没有，为null，或者省略不写。
xhr.send(); //调用send()之后,请求就会发送到服务器
在send中传入字符串也可以。
xhr.send(“methodtype=3&username=”+username)

5. 第五步：接收响应

可以在send()之前设置响应函数，xhr.onreadystatechange=getMessage;
发送请求后，会收到响应，收到响应后，XHR对象的以下属性会被填充上数据：
responseText：作为响应体返回的文本。
responseXML：如果响应的内容类型是"text/xml"或"application/xml"，那就是包含响应数据的 XML DOM 文档。
status：响应的 HTTP 状态。
200 OK：客户端请求成功。
400 Bad Request：客户端请求有语法错误，不能被服务器所理解。
401 Unauthorized：请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用。
403 Forbidden：服务器收到请求，但是拒绝提供服务。
404 Not Found：请求资源不存在，举个例子：输入了错误的URL。
500 Internal Server Error：服务器发生不可预期的错误。
503 Server Unavailable：服务器当前不能处理客户端的请求，一段时间后可能恢复正常，举个例子：HTTP/1.1 200 OK（CRLF）
statusText：响应的 HTTP 状态描述。

readyState：返回HTTP请求状态

“0” 表示open()尚未调用
“1” 表示open()已调用
“2” 表示接收到头信息
“3” 表示接收到响应主体
“4” 表示响应完成
readystatechange：请求状态改变事件。当readyState值改变为4或服务器的响应完成时，所有的浏览器都触发该事件
响应解码 MIME-TYPE：
MIME类型为text/plain,text/html,text/css 文本类型时，可以使用responseText属性解析。
MIME类型为XML文档类型时，使用responseXML属性解析。
如果服务器发送对象，数组这样的结构化数据作为其响应，他应该传输JSON编码的字符串数据。通过responseText接受到它，可以把它传递给JSON.parse()方法来解析。

xhr.onreadystatechange = function () {
    //请求发送完成 && 请求成功
	if (xhr.readyState === 4 && xhr.status === 200) {
		console.log(xhr.responseText);
	}
}

整体演示AJAX发起请求

var xmlHttp = false;
function ajaxdemo() {
    //alert("123")
    //window.ActiveXObject 判断浏览器是否是IE浏览器
    if(window.ActiveXObject){
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        console.log("microsoft")
    }else if(window.XMLHttpRequest){
        //调用js中的window.XMLHttpRequest对象
        xmlHttp = new XMLHttpRequest();
        console.log("chrome")
    }
    if(xmlHttp){//对象创建成功，获取文本框的信息，发送给服务端
        var username =  document.getElementById("username").value;
        console.log(username)
        var url = "http://127.0.0.1:8080/MyMavenProject_war/UserinfoServlet"
        //向服务端发起请求
        //参数1：请求方式
        //参数2：请求地址
        //参数3：开启异步提交
        xmlHttp.open("post",url,true)
        //设置响应信息
        xmlHttp.onreadystatechange=getMessage;
        //设置发送信息头协议
        xmlHttp.setRequestHeader('Content-type','application/x-www-form-urlencoded;charset=utf-8');
        //提交数据
        xmlHttp.send("methodtype=3&username="+username)

    }
}
function getMessage() {
    if(xmlHttp.readyStat==4){
        //响应状态
        /*
        * 0未初始化
        * 1读取中
        * 2已读取
        * 3交互中
        * 4完成
        * */
        if(xmlHttp.status == 200){
            //协议码
            /*
            * 404 资源未找到
            * 500 服务端错误
            * 200 成功
            * */
            //获取服务器端响应的数据
            var responsevalue = xmlHttp.responseText;
            //对响应文本进行判断
            if(responsevalue=="yes"){
                //用户名已存在
                document.getElementById("usernamemes").innerHTML = "用户名已存在"
                //document.getElementById("username").focus();
            }else{
                //用名可以使用
                document.getElementById("usernamemes").innerHTML = "用户名可以使用"
            }
        }
    }
}

Servlet代码

@WebServlet("/UserinfoServlet")
public class UserinfoServlet extends HttpServlet {

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

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            request.setCharacterEncoding("utf-8");
       		//判断客户端要做什么操作
       		 String methodtype = request.getParameter("methodtype");
    
            System.out.println("以ajax方式访问了服务端");
            response.setContentType("text/html");
            //设置响应头协议，无缓存
            response.setHeader("Cache-Control","no-cache");
            //response.setHeader("Access-Control-Allow-headers","*");
            //response.setHeader("Access-Control-Allow-Origin","*");
            response.getWriter().print("no");
        }else{

        }
    }

测试效果，文本框输入用户名，光离开触发脚本，实现效果

三、常用请求的使用

1、使用get发送无参请求

  获取数据
  

 

2、使用get发送有参请求

 

	
	
	
	
	
	

 

	
	
	
	获取天气数据
	

 

3、使用post发送无参请求

和get无参请求一样，只要把get改成post即可：

  获取数据
  

4、使用post发送有参请求
登录的时候会使用post发送有参请求：

  登录