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

1.创建XMLHttpRequest对象

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

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

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

下面给出一个实例

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

     <script type="text/javascript" src="./test.js"></script>

  </head>

  <body>

     <form action="" enctype="application/x-www-form-urlencoded">

          <input type="button" name="ok" id="ok" value="测试服务器连接">

      </form>

  </body>

</html>

2.创建一个js文件

//当页面加载完毕之后，执行以下代码

window.onload = function () {

    document.getElementById("ok").onclick = function () {

        /*

         * 1    创建XMLHttpRequest对象

         */

        var xhr = ajaxFunction();

        /*

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

         *

         * readyState 属性表示Ajax请求的当前状态。它的值用数字代表。

         0 代表未初始化。 还没有调用 open 方法

         1 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用

         2 代表已加载完毕。send 已被调用。请求已经开始

         3 代表交互中。服务器正在发送响应

         4 代表完成。响应发送完毕

         常用状态码及其含义：

         404 没找到页面(not found)

         403 禁止访问(forbidden)

         500 内部服务器出错(internal service error)

         200 一切正常(ok)

         304 没有被修改(not modified)(服务器返回304状态，表示源文件没有被修改 )

         */

        xhr.onreadystatechange = function(){

            alert(xhr.readyState);

            //alert(xhr.status);

            if(xhr.readyState==4){

                if(xhr.status==200||xhr.status==304){

                    var data = xhr.responseText;

                    alert(data);

                }

            }

        }

        /*

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

         *

         * xhr.open(method, url, asynch);

         *         * 与服务器建立连接使用

         *         * method：请求类型，类似 “GET”或”POST”的字符串。

         *         * url：路径字符串，指向你所请求的服务器上的那个文件。请求路径

         *         * asynch：表示请求是否要异步传输，默认值为true(异步)。

         */

        xhr.open("GET","/testServlet?c=18",true);

        /*

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

         *

         *     send()方法：

         *         * 如果浏览器请求的类型为GET类型时，通过send()方法发送请求数据，服务器接收不到

         */

        xhr.send("a=6&b=9");        //xhr.send(null);

    }

}

function ajaxFunction(){

    var xmlHttp;

    try{ // Firefox, Opera 8.0+, Safari

        xmlHttp=new XMLHttpRequest();

    }

    catch (e){

        try{// Internet Explorer

            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

        }

        catch (e){

            try{

                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

            }

            catch (e){}

        }

    }

    return xmlHttp;

}

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

package com.servlet;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import java.io.IOException;

import java.io.PrintWriter;

/**

 * Created by huangyichun on 2016/12/7.

 */

@WebServlet(name = "testServlet",urlPatterns = "/testServlet")

public class TestServlet extends HttpServlet {

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

    }

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

        System.out.println("connection...");

        System.out.println("a=" + request.getParameter("a"));

        System.out.println("c=" + request.getParameter("c"));

        PrintWriter out = response.getWriter();

        out.println("get connection server success");

    }

}

运行结果为：

控制台打印：

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. Java8 Lumbda表达式 初步

    Java8 Lumbda表达式 初步 package com.stono.test; import java.util.function.BinaryOperator; public class Te ...

  2. 不要怂，就是GAN (生成式对抗网络) （四）：训练和测试 GAN

    在 /home/your_name/TensorFlow/DCGAN/ 下新建文件 train.py,同时新建文件夹 logs 和文件夹 samples,前者用来保存训练过程中的日志和模型,后者用来保 ...

  3. SQL Server-聚焦SNAPSHOT基于行版本隔离级别详解（三十）

    前言 上一篇SQL Server详细讲解了隔离级别,但是对基于行版本中的SNAPSHOT隔离级别仍未完全理解,本节再详细讲解下,若有疑义或不同见解请在评论中提出,一起探讨. SNAPSHOT行版本隔离 ...

  4. 路由器安装ubuntu-16.04.1-server-amd64出现“无法安装busybox-initramfs”错误。向目标系统中安装busybox-initramfs软件包时出现一个错误。请检查/var/log/syslog或查看第四虚拟控制台以获得详细

    公司的路由器要ubuntu服务器进行路由网络功能的管理,在安装的时候出现下面的错误提示: 安装ubuntu-16.04.1-server-amd64出现“无法安装busybox-initramfs”错 ...

  5. Ubuntu 制作U盘启动盘

    部门需要一台Linux系统远程共享服务器,需要一个启动盘安装.但是由于公司windows 系统都安装了保安软件,而且软件的使用也是有限制的.所以不能使用UltraISO 这类软件制作U盘启动盘.还好部 ...

  6. python中文编码问题深入分析（一）：字符编码基础

    背景:笔者作为一名刚接触python语言的新手,在实际的项目中,遇到过一些中文编码问题,初次遇到这些问题的时候,刚开始显得有些手足无措,也不知从何查起.常言道:有问题,找度娘!当我打开www.baid ...

  7. java字符串比较及小数浮点型的使用

    import java.text.DecimalFormat; /* * 小数类型的常量默认是double类型,声明float类型的常量需要使用F作为后缀. * * 关于equals()和==: 对于 ...

  8. python报错UnicodeDecodeError: 'ascii' codec can't decode byte 0xe8 in position 0 解决方案

    环境:mac+python 2.7 场景描述:在使用python修改excel内容修改表格内容为中文保存时报以下错误 此时已经设置了utf-8了 但保存时仍然报错错 此时将python中的中文使用un ...

  9. 初探 discuz

    测试: vim /etc/hosts       ##ip地址转换 修改windows 的配置文件,写字板打开 vim /usr/local/apache/conf/httpd.conf vim /u ...

  10. 基于php(Thinkphp)+jquery 实现ajax多选，反选，不选 删除数据 新手学习向

    jquery多选源码来源素材火http://www.sucaihuo.com/ (有什么问题可以私本人邮箱1428937236@qq.com,也可加qq来时表明来意即可) 建议有js基础,了解jque ...