原生ajax使用方法

Ajax 即"Asynchronous Javascript And XML"(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。

  • 同步与异步的区别
    同步与异步的区同步发送一个请求,需要等待返回相应,如果没有返回相应,就不能发送下一个请求,客户端会一直处于等待返回相应的阶段。
    异步发送一个请求,不等待返回相应,随时可以发送另一个请求。
    前端代码
<!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 sendRequest() {
				//js的ajax访问
				//1)创建Ajax引擎对象
				var xmlhttp = new XMLHttpRequest();
				//2)为Ajax引擎对象绑定监听(监听服务器已将数据响应给引擎)
				xmlhttp.onreadystatechange = function() { //引擎状态一改变就触发该事件
					if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
						//5)接受响应数据
						//获得服务器端返回给引擎对象的数据
						alert(xmlhttp.responseText);
					}
				}
				//3)绑定提交地址
				/*
				GET:请求方式
				url地址
				true是否异步 代表异步 false代表同步
				2.2.2 Servlet代码
				第3章 jQuery框架的ajax
				3.1 jQuery框架的ajax简介
				jquery是一个优秀的js框架,自然对js原生的ajax进行了封装,封装后的ajax的操 作方法更简洁,功能更强大,与
				ajax操作相关的jquery方法有如下几种,但开发中 经常使用的有三种:
				true是否异步 代表异步 false代表同步
				*/
				xmlhttp.open("GET", "/AjaxDemo/ajaxServlet", true);
				//4)发送请求
				xmlhttp.send();
			}
		</script>
	</head>

	<body>
		<input type="button" value="ajax异步访问服务器端" onclick="sendRequest()">
	</body>

</html>

java代码

package com.itheima.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
	response.getWriter().write("ajax response data ...");
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response)throwsServletException, IOException {
	doGet(request, response);
	}
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值