【速成之路】网页编程必会的Ajax——Ajax工作流程（二）

这个昵称我想了20分钟

已于 2022-06-21 14:40:18 修改

阅读量678

点赞数 51

分类专栏：【速成之路】Ajax 文章标签： ajax 服务器前端

于 2022-05-17 06:30:00 首次发布

本文链接：https://blog.csdn.net/m0_61684063/article/details/124470350

版权

【速成之路】Ajax 专栏收录该内容

7 篇文章 11 订阅

订阅专栏

🎉个人主页：这个昵称我想了20分钟
✨往期专栏: 【速成之路】jQuery
【速成之路】SQLserver

🔓本期专栏：【速成之路】Ajax

Ajax数据的发送与请求

在这里插入图片描述

请求头和主体信息

HTTP协议中规定客户端向服务器端发送的信息分为两个部分：请求的头部信息和请求的主体信息。其中，主体信息通常是发给服务器端的处理程序处理的数据，这是请求的核心数据部分，请求的头部信息用来传递一些对服务器及处理程序有用的附加信息，例如请求的字符集、客户端的类型等，这有助于服务器及处理程序能更好地处理主体数据。
在Ajax应用中，使用 XMLHttpRequest 对象可以发送请求的头部信息及请求的主体信息。头部信息使用 setRequestHeader (name, value)方法发送。主体信息通过URL的附加参数或通过 XMLHttpRequest 对象的send()方法发送。

Ajax请求

Ajax使用 XMLHttpRequest 对象发送的请求，与浏览器发送的请求相比，并没有本质上的区别，都是基于HTTP协议的请求。在HTTP协议中规定了多种请求类型，从应用的角度来讲比较常用的包括GET请求和POST请求。

GET请求

GET请求的主要用途是从指定的服务器中获取资源。在GET请求中，通常只需指定资源的路径。如果请求的是一个动态的资源，比如JSP、PHP、CGI等，可以在请求的路径后面附加查询的参数信息，以便程序可以根据该参数查询更为具体的信息。附加参数的方法如下所示：

请求的路径?名称1=值1&名称2=值2&名称3=值3…

JSP在服务器端可以使用request. getQueryString()方法返回“?”后面的整个字符串，也可以使用==request.getParameter (“名称”)==返回某个值。

POST请求

POST请求的主要用途是向服务器发送信息。在POST请求中，参数信息并不是通过URL来传递的，而是在请求的主体中，这部分信息用户无法看见，并且没有长度的限制。请求主体的参数格式如下所示：

名称1=值1&名称2=值2&名称3=值3…

需要注意的是，为了通知服务器端请求的主体内容为表单中的参数信息，需要调用 XMLHttpRequest 的 setRequestHeader ()方法来设置请求头，否则将无法取到参数，该方法的使用如下所示：

setRequestHeader ("Content-Type"," application /x-www-form-urlencoded ;charset=UTF-8");

JSP在服务器端可以使用request.getReader()方法以流的形式得到这些信息，也可以使用==request.getParameter (“名称”)==返回某个值。

例1检测用户输入的用户名在服务器中是否已被其他用户使用，如果没有被使用，将用绿底白字显示“用户名可用”，否则将用红底白字显示“用户名被占用”，在浏览器的运行结果如图1和图2所示。

【例1】

<!DOCTYPE html>
<html>
   <head>
   <title>用户名测试</title>
   <meta http-equiv="keywords"content="keyword1,keyword2,keyword3">
   <meta http-equiv=" description "content="this is my page">
   <meta http-equiv="content-type" content="text/html;  charset=UTF-8">
   <script type="text/javascript ">
      window.onload=function(){
          var myUser=document.getElementById ("username");
          myUser.onblur= loadXMLDoc ;
          function  loadXMLDoc ()
          {
            var xmlhttp;
            if(window.XMLHttpRequest )
          {
            //IE7+、Firefox、Chrome、Opera、Safari浏览器执行代码
			xmlhttp=new  XMLHttpRequest ();
           }
           else
           {
             //IE6、IE5浏览器执行代码
             xmlhttp=new  ActiveXObject ("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange =function(){
              //判断和服务器端的交互是否完成，判断服务器端是否正确返回了数据
              if(xmlhttp.readyState ==4){// readyState=4表示交互完成
                 if(xmlhttp.status==200){//status=200表示正确返回了数据
                 var message=xmlhttp.responseText ;//读取服务器返回的数据
                 var flag=message.replace(/\s*/g,"");//使用正则表达式删除空格
                 var disp=document.getElementById ("display")
                 if(flag=="true"){
                       disp.innerHTML="用户名被占用";
                       disp.style.color="white";
                       disp.style. background ="red";
                  }
                  else
                  {
                    disp.innerHTML="用户名可用";
                    disp.style.color="white";
                    disp.style.background ="green";
                   }
                }
            }
        }
        xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8"); 
		xmlhttp.open("POST","/he11o/AjaxServlet ", true);//设置post方法
		xm1http.send('name='+myUser.value);//向服务器传送输入的用户名
        }
    }
   </script>
   </head>
<body>
   <form action=""  method="get">
     <input type="text"  id="username"  name="username">
     <span id="display"></span><br>
      <input type="submit"  value="测试">
   </form>
</body>
</html>

例1中，当触发“失去焦点”的事件时，将调用以POST方式提交到服务器的Servlet，由Servlet进行简单的验证，即当用户名是“abc”时，向客户端返回“true”，其他任何用户名都返回“false”。这里调用的服务器端servlet程序的源代码名称是 AjaxServlet.java，如下所示：

package com.lb.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import  javascript.servlet.http.HttpServletResponse;
public class  AjaxServlet  extends  HttpServlet {
   private static final long serialVersionUID=1L;
   public  AjaxServlet (){
      super();
   }
   public void destroy(){
   super.destroy();
   //Put your code here
   }
   public void doGet( HttpServletRequest  request, HttpServletResponse  response) throws  ServletException , IOException {
     String username=(String)request.getParameter("name");
     response.setContentType("text/html");
     PrintWriter  out=response.getWriter();
     if(username.equals("abc")){   //用户名等于abc,返回true,否则返回false
      out.println(true);
     }
     else
     {
      out.println(false);
     }
   }
   public void doPost(HttpServletRequest  request, HttpServletResponse  response) throws  ServletException , IOException {
	   this.doGet(request, response);
   }
     public void init() throws  ServletException {
     //初始化Servlet
    }
}

例1中，如果使用GET方法向服务器端发送数据，可以把例1程序源代码中斜体的两行换成以下两句：

xmlhttp.open("GET","9-2-server. jsp? username="+myUser. value, true); 
xmlhttp.send();

在这里插入图片描述

这个昵称我想了20分钟

关注

51
点赞
踩
50

收藏

觉得还不错? 一键收藏
打赏
47
评论
【速成之路】网页编程必会的Ajax——Ajax工作流程（二）

Ajax数据的发送与请求请求头和主体信息Ajax请求GET请求POST请求请求头和主体信息(1)请求头和主体信息。HTTP协议中规定客户端向服务器端发送的信息分为两个部分：请求的头部信息和请求的主体信息。其中，主体信息通常是发给服务器端的处理程序处理的数据，这是请求的核心数据部分，请求的头部信息用来传递一些对服务器及处理程序有用的附加信息，例如请求的字符集、客户端的类型等，这有助....
复制链接

扫一扫