html与js实现ajax,使用js实现ajax的get请求步骤

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

1.创建XMLHttpRequest对象

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

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

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

下面给出一个实例

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

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的post请求步骤

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

原生JS实现ajax 发送post请求

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

NodeJ node.js Jquery Ajax 跨域请求

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

vue.js的ajax和jsonp请求

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

Ajax引擎：ajax请求步骤详细代码

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

用原生JS实现AJAX和JSONP

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

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

javascript/js的ajax的GET请求:

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

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

用JS实现Ajax请求

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

随机推荐

mssql整理

select charindex( 'a ', 'bcad ') 1 删除女性数据2.SELECT * FROM Group2 where PATINDEX('%[吖-做]%',[Nick])=0 找 ...

点击弹出固定大小的新窗口(js实现)

Swift基础语法-内存管理, 自动引用计数

1. 工作机制 Swift和OC一样,采用自动引用计数来管理内存 当有一个强引用指向某一个对象时,该对象的引用计数会自动+1 当该强引用消失时,引用计数会自动-1 当引用计数为0时,该对象会被销毁 2 ...

如何读懂SQL Server的事务日志

简介 本文将介绍SQL Server的事务日志中记录了哪一些信息,如何来读懂这些事务日志中信息.首先介绍一个微软没有公开的函数fn_dblog,在文章的接下来的部分主要用到这个函数来读取事务日志. f ...

Javascript事件模型(二)：Javascript事件的父元素和子元素

DOM事件标准定义了两种事件流,分别是捕获和冒泡.默认情况下,事件使用冒泡事件流,不使用捕获事件流.你可以指定使用捕获事件流,方法是在注册事件时传入useCapture参数,将这个参数设为true. ...

springboot~ObjectMapper~dto到entity的自动赋值

实体与Dto自动赋值 在开发的过程中,实体之间相互赋值是很正常的事,但是我们一般的方法都通过set和get方法来进行的,如果要赋值的字段少那还行,但是需要赋值的字段超过10个,那就是个灾难,你会看到整 ...

Django框架简介-路由系统

2.2 路由系统 Django 1.11版本 URLConf官方文档 URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL与要为该URL调用的视图函数之间的映射表. 你就是 ...

Java相关英语单词

day1 Java概述 掌握 .JDK abbr. Java开发工具包(Java Developer's Kit) (abbr.缩写) .JRE abbr. Java运行环境(Java Runtime ...

Entity Framework 6.x - 创建模型来自于现有数据库

Creating a Model from an Existing Database 一.创建数据库 Chapter2 USE master GO CREATE DATABASE Chapter2 G ...

计算机名、主机名、用户账户名与NetBIOS名有什么区别

1.计算机名:右击“我的电脑”,选择“属性”,在“系统属性”对话框的“计算机名”选项卡里,可以设置计算机名.计算机名是对域(或工作组)中的计算机的标识,如果你的计算机名设置为“至清水”,则在网上邻居里 ...