(以下内容非原创,视频整合得来的)

1.创建XMLHttpRequest对象

2.浏览器与服务器建立连接

3.浏览器向服务器发送请求

4.服务器向浏览器响应请求

下面给出一个实例

1.创建一个testget.jsp的文件,放在web\01_testget\testget.jsp

  1. <%@ page language="java" pageEncoding="utf-8"%>
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  3. <html>
  4. <head>
  5. <script type="text/javascript" src="./test.js"></script>
  6. </head>
  7. <body>
  8. <form action="" enctype="application/x-www-form-urlencoded">
  9. <input type="button" name="ok" id="ok" value="测试服务器连接">
  10. </form>
  11. </body>
  12. </html>

2.创建一个js文件

  1. //当页面加载完毕之后,执行以下代码
  2. window.onload = function () {
  3. document.getElementById("ok").onclick = function () {
  4. /*
  5. * 1 创建XMLHttpRequest对象
  6. */
  7. var xhr = ajaxFunction();
  8.  
  9. /*
  10. * 4 服务器向浏览器响应请求
  11. *
  12. * readyState 属性表示Ajax请求的当前状态。它的值用数字代表。
  13. 0 代表未初始化。 还没有调用 open 方法
  14. 1 代表正在加载。 open 方法已被调用,但 send 方法还没有被调用
  15. 2 代表已加载完毕。send 已被调用。请求已经开始
  16. 3 代表交互中。服务器正在发送响应
  17. 4 代表完成。响应发送完毕
  18.  
  19. 常用状态码及其含义:
  20. 404 没找到页面(not found)
  21. 403 禁止访问(forbidden)
  22. 500 内部服务器出错(internal service error)
  23. 200 一切正常(ok)
  24. 304 没有被修改(not modified)(服务器返回304状态,表示源文件没有被修改 )
  25. */
  26. xhr.onreadystatechange = function(){
  27. alert(xhr.readyState);
  28. //alert(xhr.status);
  29. if(xhr.readyState==4){
  30. if(xhr.status==200||xhr.status==304){
  31. var data = xhr.responseText;
  32. alert(data);
  33. }
  34. }
  35. }
  36.  
  37. /*
  38. * 2 浏览器与服务器建立连接
  39. *
  40. * xhr.open(method, url, asynch);
  41. * * 与服务器建立连接使用
  42. * * method:请求类型,类似 “GET”或”POST”的字符串。
  43. * * url:路径字符串,指向你所请求的服务器上的那个文件。请求路径
  44. * * asynch:表示请求是否要异步传输,默认值为true(异步)。
  45. */
  46. xhr.open("GET","/testServlet?c=18",true);
  47.  
  48. /*
  49. * 3 浏览器向服务器发送请求
  50. *
  51. * send()方法:
  52. * * 如果浏览器请求的类型为GET类型时,通过send()方法发送请求数据,服务器接收不到
  53. */
  54. xhr.send("a=6&b=9"); //xhr.send(null);
  55. }
  56. }
  57.  
  58. function ajaxFunction(){
  59. var xmlHttp;
  60. try{ // Firefox, Opera 8.0+, Safari
  61. xmlHttp=new XMLHttpRequest();
  62. }
  63. catch (e){
  64. try{// Internet Explorer
  65. xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  66. }
  67. catch (e){
  68. try{
  69. xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  70. }
  71. catch (e){}
  72. }
  73. }
  74.  
  75. return xmlHttp;
  76. }

3.创建一个TestServlet来处理这个jsp请求

  1. package com.servlet;
  2.  
  3. import javax.servlet.ServletException;
  4. import javax.servlet.annotation.WebServlet;
  5. import javax.servlet.http.HttpServlet;
  6. import javax.servlet.http.HttpServletRequest;
  7. import javax.servlet.http.HttpServletResponse;
  8. import java.io.IOException;
  9. import java.io.PrintWriter;
  10.  
  11. /**
  12. * Created by huangyichun on 2016/12/7.
  13. */
  14. @WebServlet(name = "testServlet",urlPatterns = "/testServlet")
  15. public class TestServlet extends HttpServlet {
  16. protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  17.  
  18. }
  19.  
  20. protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  21. System.out.println("connection...");
  22. System.out.println("a=" + request.getParameter("a"));
  23. System.out.println("c=" + request.getParameter("c"));
  24.  
  25. PrintWriter out = response.getWriter();
  26.  
  27. out.println("get connection server success");
  28. }
  29. }

运行结果为:

控制台打印:

connection...
a=null
c=18

浏览器弹出窗口:

使用js实现ajax的get请求步骤的更多相关文章

  1. js实现ajax的post请求步骤

    post请求步骤与前篇的get请求步骤差别不大,只是增加了 xhr.setRequestHeader("Content-type","application/x-www- ...

  2. 原生JS实现ajax 发送post请求

    1. [代码]原生JS实现ajax 发送post请求 <script> var oStr = ''; var postData = {}; var oAjax = null; //post ...

  3. NodeJ node.js Jquery Ajax 跨域请求

    Jquery + Ajax 跨域请求 说白了就是前台请求ajax数据(JSON)但是请求的数据不在本地的绝对路径下,接口数据 是没有这个安全性的我对外公开的接口数据,只要你找到接口你就可以使用里面的数 ...

  4. vue.js的ajax和jsonp请求

    首先要声明使用ajax 在 router下边的 Index.js中 import VueResource from 'vue-resource'; Vue.use(VueResource); ajax ...

  5. Ajax引擎:ajax请求步骤详细代码

    说起AJAX,可能是很多同学在很多地方都看到过,各大招聘网站上对于WEB前端和PHP程序员的技能要求清单中也是必不可少的一项.但是,ajax请求步骤详细代码以及说明却比较少见到 什么是AJAX引擎? ...

  6. 用原生JS实现AJAX和JSONP

    前端开发在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的.其实,原生 ...

  7. [代码]JS原生Ajax,GET和POST

    javascript/js的ajax的GET请求: <script type="text/javascript"> /* 创建 XMLHttpRequest 对象 */ ...

  8. 原生JS实现Ajax及Ajax的跨域请求

      前  言          如今,从事前端方面的程序猿们,如果,不懂一些前后台的数据交互方面的知识的话,估计都不太好意思说自己是程序猿.当然,如今有着许多的框架,都有相对应的前后台数据交互的方法. ...

  9. 用JS实现Ajax请求

    AJAX核心(XMLHttpRequest) 其实AJAX就是在Javascript中多添加了一个对象:XMLHttpRequest对象.所有的异步交互都是使用XMLHttpServlet对象完成的. ...

随机推荐

  1. WPF中将16进制颜色码转换成SolidColorBrush

    使用ColorConverter.ConvertFromString(string colorValue)方法 例如:new SolidColorBrush((Color)ColorConverter ...

  2. 数据契约(DataContract)的作用

    服务契约定义了远程访问对象和可供调用的方法,数据契约则是服务端和客户端之间要传送的自定义数据类型. 一旦声明一个类型为DataContract,那么该类型就可以被序列化在服务端和客户端之间传送,如下所 ...

  3. 二维动态规划——Palindrome

    Palindrome Description A palindrome is a symmetrical string, that is, a string read identically from ...

  4. loadrunner:从数据库中取值进行参数化

    下面我们介绍用数据库中的用户名来参数化登陆用户名. 框选住登陆名,点鼠标右键,弹出对话框,选择"替换为新参数"弹出对话框,此时参数名输入:name,参数类型选择File,如图 点& ...

  5. hadoop在windows下安装运行

    1.下载windows环境下编译的hadoop-2.7.2.x64win.zip 2.解压至D:\BigData\hadoop-2.7.2 3.修改D:\BigData\hadoop-2.7.2\et ...

  6. Charlse 使用小记

    抓包神器Fiddler 是基于微软的 .Net 技术开发的,没办法直接在 Mac/Linux 下使用,而Charlse是Mac下常用的网络封包截取工具.是一个HTTP代理服务器,HTTP监视器,反转代 ...

  7. (汉化改进作品)BruteXSS:Xss漏洞扫描脚本

    今天给大家进行汉化改进的事一款脚本工具:BruteXSS,这款脚本能自动进行插入XSS,而且可以自定义攻击载荷. 该脚本也同时提供包含了一些绕过各种WAF(Web应用防护系统)的语句.   0×01简 ...

  8. cygwin 运行窗口程序

    首先, 默认安装的cygwin是不能运行窗口程序的 比如,一段python窗口程序: import * from tkinter Tk() mainloop() 如果使用命令行: python3 py ...

  9. js在新页面中返回到上一页浏览的历史位置

    在微信浏览器中浏览页面时,在当前页面中当我们将页面往下滚动到某一个位置时,可能我们就会点击某个链接而页面跳转到了另外一个页面,而当我们又返回到上一个页面时我们会发现那个页面还停留在我们之前浏览的位置, ...

  10. c#中读取数据库bit布尔字段数据转换Int和bool时的错误

    数据库里bit这个布尔类型的字段,非常实用,但是在c#里读取时,许多人喜欢犯一些错误,导致运行报错. 实际中,有效的正确读取方法只有以下两种: int xxx= Convet.ToInt16(read ...