码迷,mamicode.com
首页 > Web开发 > 详细

ajax发送post请求

时间:2017-04-04 01:18:45      阅读:327      评论:0      收藏:0      [点我收藏+]

标签:ajax技术   用户名   null   网页   信息   

前言:在上篇中,我们使用ajax技术,以get方式发起请求,达到了网页端局部刷新的效果。这次,我们使用post方式来实现局部刷新。


在上篇的基础上,.jsp/web.xml/servlet三个部分都要改动或新写



步骤核心(就是修改index.jsp文件):

第一步:在js中创建XMLHttpRequest对象


第二步:获取用户在id="username"的input元素中输入的信息


第三步:通过XMLHttpRequest对象发起post请求

要点

(1)ajax发起post请求,需要先设置好请求头(就得按下面那样写)

 xhr.setRequestHeader(

 "content-type","application/x-www-form-urlencoded");


(2)向XMLHttpRequest对象中放入请求


(3)发送请求时,xhr.send方法的参数不再是null了,需要传入我们在第二步中获取到的用户名。代码为:


xhr.send("name="+name);


注意:send方法中,写入的参数的形式必须是:"参数名="+参数值



第四步:

(1)设置触发请求的事件(本例中的是onblur,光标离开事件)


(2)设置服务器返回响应的内容在浏览器的哪个位置局部刷新出来



第五步:创建回调函数,检测readyState属性的值


第六步:当readyState值为4且status值为200时,服务器返回相应完毕,从响应中获取返回的内容,显示到浏览器上指定的位置


一、index.jsp文件

<%@ page language="java"  pageEncoding="utf-8"%>

<html>

  <head>  

  </head>


   ......(上篇的代码部分)


   <script type="text/javascript">

   //检查用户名是否可用

   function checkname(){

  

   //这次发起请求时,还要将用户输出的用户名也发给服务器

   //获取请求参数

  var name = document.getElementById("username").value;

  

   //获取XMLHttpRequest对象

   var xhr = new XMLHttpRequest();

  

   //将post请求放到XMLHttpRequest对象中

   xhr.open("post","/ajax01/check.do")

   //ajax发起post请求,需要先设置好请求头(就得按下面那样写)

   xhr.setRequestHeader(

   "content-type","application/x-www-form-urlencoded");

  

   //注册回调函数

   xhr.onreadystatechange = function(){

  

   //1、readyState状态码为4表示服务器返回响应完毕

   //2、XMLHttpRequest对象的status属性:

   //(1)该属性值可为:404/500/200/...

   //(2)当xhr.status==200时,表示请求处理成功

   //如果请求处理完毕

   if(xhr.readyState == 4 && xhr.status == 200 ){

  

   //获取响应的内容信息

   var msg = xhr.responseText;

  

   //将该信息追加到指定的网页位置

  document.getElementById("username_msg").innerHtml = msg;

   }

   };

  

   //发送请求(必须是("参数名="+参数值)的形式)

   xhr.send("name="+name);

  

   //发起请求后,显示正在检测

 document.getElementById("username_msg").innerHtml = "正在检测...";

   };

  

   </script>

  <body>


   ......(上篇的代码部分)


   <hr/>

    <table>


      <tr>

        <td>新闻标题</td>

        <td>时间</td>

      </tr>


      <tr>

        <td>习近平和英九在新加坡相会</td>

        <td>2015-11-11</td>

      </tr>


      <tr>

        <td>经济指数有所改观</td>

        <td>2015-11-10</td>

      </tr>


      <tr>

        <td>大宗商品价格下跌</td>

        <td>2015-11-10</td>

      </tr>


    </table>

    <hr/>


<!-- onblur属性:鼠标失去焦点事件(就是鼠标的光标离开了文本框) -->

<input type="text" id="username" onblur="checkname()">

 

//服务器返回的信息在这里局部刷新出来

<span id="username_msg"></span>

  </body>

  

</html>

二、创建一个servlet,用于检查浏览器端发来的用户名是否可用

package org.tarena.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{

public void service(

HttpServletRequest request,

HttpServletResponse response)

throws ServletException, IOException{

System.out.println(1);

//模拟实际请情况,延迟3s后返回结果(延迟时显示请求正在处理)

try {

Thread.sleep(3000);

} catch (InterruptedException e) {

e.printStackTrace();

}

System.out.println(2);

//设置返回的文件类型和编码集

response.setContentType("text/plain;charset=utf-8");

//获取一条输出流,用于向浏览器端显示信息

PrintWriter out = response.getWriter();

System.out.println(3);

//对于请求带过来的数据,用utf-8来解码

request.setCharacterEncoding("utf-8");

System.out.println(4);

//获取请求中name参数的值

String name = request.getParameter("name");

System.out.println(5);

//检测name值是否可用

if("scott".equals(name)){

out.println("用户名已被占用");

}else{

out.println("用户名可用");

}

System.out.println(6);

out.flush();

out.close();

}

}

三、在web.xml文件中为CheckServlet这个servlet设置接收的请求,我们设置该servlet接收的请求是"/check.do"(代码就不赘述了)

操作:

(1)发起请求,进入index.jsp页面

请求为:http://localhost:8080/ajax01/index.jsp

浏览器显示如图:

技术分享

(2)在文本框中输入用户名,显示为:

技术分享
技术分享



ajax发送post请求

标签:ajax技术   用户名   null   网页   信息   

原文地址:http://10420298.blog.51cto.com/10410298/1912721

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!