Ajax基础 Ajax发送Get请求和post请求

89 阅读 0 评论 59 点赞

我是靠谱客的博主还单身冬天，这篇文章主要介绍Ajax基础 Ajax发送Get请求和post请求，现在分享给大家，希望可以做个参考。

1.什么是Ajax

“Asynchronous Javascript And XML”（异步JavaScript和XML）

1.使用CSS和XHTML来表示。

2. 使用DOM模型来交互和动态显示。

3.使用XMLHttpRequest来和服务器进行异步通信。

4.使用javascript来绑定和调用。

为了解决局部刷新的问题。保持其他部分不动，只刷新某些地方。

2.使用方式

首先取得XMLHttpRequest对象

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;
}

或者

function ajaxFunction(){
var xmlhttp;

if (window.XMLHttpRequest){ // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp=new XMLHttpRequest();}else{ // IE6, IE5 浏览器执行代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
return xmlhttp
}

Ajax发送Get请求和post请求

完整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 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;
}
//get数据
function get() {
//1. 创建xmlhttprequest 对象
var request = ajaxFunction();
//2. 发送请求
request.open("GET" ,"demoServlet1?name=get&age=20" ,true );
//3. 获取响应数据 注册监听的意思。
一会准备的状态发生了改变，那么就执行 = 号右边的方法
request.onreadystatechange = function(){
//前半段表示 已经能够正常处理。
再判断状态码是否是200
if(request.readyState == 4 && request.status == 200){
//弹出响应的信息
alert(request.responseText);
}
}
request.send();
}
//post数据
function post(){
//调用ajaxfun()方法取得对象
var requestPost = ajaxFunction();
/* 第二步 */
//发送请求(	request.open(请求类型, 请求路径, 是否异步);)
requestPost.open("post", "demoServlet1", true );
//想获取服务器传送过来的数据， 加一个状态的监听。
//请求完成,响应就绪
并且 网页状态码为200 表示ok
requestPost.onreadystatechange=function(){
if(requestPost.readyState==4 && requestPost.status == 200){
alert("post："+requestPost.responseText);
}
}
//如果使用post方式带数据,需要添加头说明提交的数据类型是经过url编码的from表单数据
requestPost.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//send方法写表单数据
requestPost.send("name=post&age=18");
}
</script>
</head>
<body>
<a href="" οnclick="get()">使用Ajax发送Get请求</a> <br>
<a href="" οnclick="post()">使用Ajax发送post请求</a>
</body>
</html>

对应java文件

demoServlet1

package Servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class demoServlet1
*/
public class demoServlet1 extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String n = request.getParameter("name");
String age = request.getParameter("age");
System.out.println("get请求 name=" + n+"age="+age);
response.setContentType("text/html;charset=utf-8");
response.getWriter().write("我收到get数据"
+ "原样发送回来 name="+n+",age="+age);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("post请求来了 然后走doget");
String n = request.getParameter("name");
String age = request.getParameter("age");
System.out.println("post请求 name=" + n+"age="+age);
response.setContentType("text/html;charset=utf-8");
response.getWriter().write("我收到post数据"
+ "原样发送回来 name="+n+",age="+age);
}
}

用来校验用户名是否可用,用户名输入提示等