Ajax工作流程(原生Ajax)

Ajax通过XMLHttpRequest对象实现异步方式在后台发送发送请求。

主要有以下四个步骤：

（1）初始化XMLHttpRequest对象。不同浏览器的差异，需要我们创建一个跨浏览器的对象，并判断XMLHttpRequest对象创建是否成功，如果不成功，则给予提示。

（2）为XMLHttpRequest对象指定一个回调函数，用于对后台返回结果进行处理。

（3）创建一个与服务器的连接，在创建时，需要指定发送请求的方式（GET/POST），以及设置是否采用异步方式发送请求。

（4）向服务器发送请求。

以下是一个用Ajax判断用户名是否正确的样例：

index.jsp文件：

page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">function getAnswer(username) {if(username.value == ""){alert("请输入用户名");username.focus();return;}else{checkUsername("checkusername.jsp?username="+username.value);    //参数已整合到url地址中}}function checkUsername(url) {http_request = new XMLHttpRequest();      //初始化XMLHttpRequest对象http_request.onreadystatechange = function (){      //回调函数对后台返回结果进行处理if(http_request.readyState==4){if(http_request.status == 200){alert(http_request.responseText);}else{alert("地址有误");}}}http_request.open("POST",url,true);         //链接服务器http_request.send(null);                    //发送请求，这里不用带参数，前面参数已经整合进url中。}
</script>
</head>
<body>
<form action="" method="get" name="form1">用户名：<input type="text" name="username"><br>密码：<input type="password" name="passwd"><br><input type="submit" value="提交" onclick="getAnswer(this.form.username)">
</form>
</body>
</html>

checkusername.jsp(后台处理)：

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<%String s = new String(request.getParameter("username").getBytes("ISO-8859-1"),"utf-8");if(s.equals("Tom")){out.print("此用户已注册");}else{out.print("恭喜你注册成功");}
%>

另一种实现方法：（post方法，但传参数）

index.jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">function getAnswer(username) {if(username.value == ""){alert("请输入用户名");username.focus();return;}else{checkUsername("checkusername.jsp",username);   }}function checkUsername(url,username) {http_request = new XMLHttpRequest();      //初始化XMLHttpRequest对象var param = "username="+username.value;//alert(username.value);http_request.onreadystatechange = function (){      //回调函数对后台返回结果进行处理if(http_request.readyState==4){if(http_request.status == 200){alert(http_request.responseText);}else{alert("地址有误");}}}http_request.open("POST",url,true);         //链接服务器http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");       //设置表头http_request.send(param);                    //发送请求，这里不用带参数，前面参数已经整合进url中。}
</script>
</head>
<body>
<form action="" method="get" name="form1">用户名：<input type="text" name="username"><br>密码：<input type="password" name="passwd"><br><input type="submit" value="提交" onclick="getAnswer(this.form.username)">
</form>
</body>
</html>

Ajax工作流程(原生Ajax)相关推荐

[JavaScript][AJAX] 前后端交互流程,ajax工作流程
目录前后端交互流程 1.了解服务器 : 提供服务器的机器(计算机) 2.前端访问服务器的几种方式 3.ajax技术 : 页面不跳转的情况下,向服务器请求数据 4.前后端交互三个流程 ajax工作流 ...
原生ajax如何执行,原生ajax调用数据实例讲解
由于jQuery的盛行,现在使用较多的是jQuery封装好了的ajax,因为解决了浏览器兼容性问题,这对程序员来说就等于去掉了一个心头大患,但并非原生ajax就销声匿迹,并且本人感觉还是对原生的aja ...
.ajax get 写法,原生Ajax写法（GET）
ajax的GET提交方式的原生代码: var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else if(w ...
一、AJAX学习笔记——原生AJAX （ajax简介、XML简介、ajax优缺点、ajax的使用）
第 1 章:原生 AJAX 1.1 AJAX 简介 AJAX 全称为 Asynchronous JavaScript And XML,就是异步的 JS 和 XML. 通过 AJAX 可以在浏览器中向服 ...
原生ajax传值php,原生ajax上传图片，php后台处理总结
原生ajax上传图片,php后台处理总结这篇文章发布于 2018/10/03,归类于后端数据库等标签: 原生ajax上传图片,php后台处理图片上传开始做图片上传,发现之前的处理方式基本忘光了 ...
瀑布流ajax思路步骤,原生ajax瀑布流demo分享(必看篇)
最近听朋友们说起瀑布流挺多的,自己就去研究下了,一个简单的原生demo,分享给大家... 简单分为三个文档,有详细的注释:img:ajax.php:demo.php 其中img文件夹中放入图片 1.j ...
原生php ajax post_使用原生ajax发送post请求完整案例
搜索热词使用ajax发送数据实现前后台的交互,我想是web开发最基础的技能了.近来dz开发因为不兼容jquery,所以只能使用原生js发送数据,不想还遇到很多问题.在这里分析总结一下.先来一个使用a ...
对原生ajax的理解
$.ajax({url:'',//请求文件路径type:'',//请求方式GET POSTdata:{},//要发给服务器的数据参数dataType:'',//希望接口返回的数据格式json,stri ...
【AJAX 笔记】AJAX 基本、HTTP 基本、原生 AJAX 的使用，jQuery / Axios / fetch 发送请求、跨域（JSONP/CORS）
文章目录 1 Ajax 概述 1.1 AJAX 简介 1.2 XML 简介 1.3 AJAX 的特点 1.3.1 AJAX 的优点 1.3.2 AJAX 的缺点 1.4 AJAX 属性和方法 2. H ...

Ajax工作流程(原生Ajax)

Ajax工作流程(原生Ajax)相关推荐

最新文章

热门文章