AJAX

AJAX：即“Asynchronous Javascript And XML”(異步的JavaScript和XML)，是指一種創(chuàng)建交互式網(wǎng)頁應用的網(wǎng)頁開發(fā)技術，尤其是在一種在無需重新加載整個網(wǎng)頁的情況下，能夠更新部分網(wǎng)頁的技術。

傳統(tǒng)Web開發(fā)

World Wide Web(簡稱Web)：是隨著Internet的普及使用而發(fā)展起來的一門技術，其開發(fā)模式是一種請求→刷新→響應的模式，每個請求由單獨的一個頁面來顯示，發(fā)送一個請求就會重新獲取這個頁面。

Ajax采用異步通信，主要以數(shù)據(jù)交互為主；傳統(tǒng)的web開發(fā)采用同步通信，主要以頁面交互為主。

例子：在頁面寫一個生成隨機數(shù)的表單

用form表單提交的方式

index.jsp

$Title$

${num}

random.do

@WebServlet(name = "randomServlet",urlPatterns = "/random.do")

public class randomServlet extends HttpServlet {

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

String strmax = request.getParameter("max");

int max = Integer.parseInt(strmax);

Random random = new Random();

int num = random.nextInt(max);

request.setAttribute("num",num);

request.setAttribute("max",max);

request.getRequestDispatcher("index.jsp").forward(request,response);

}

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

}

}

用這種方式是向后臺提交整個網(wǎng)頁

下面用ajax方式

ajax請求步驟

1.創(chuàng)建Ajax對象

var request = new XMLHttpRequest();

2.連接服務器

open(method,url,async);

request.open("get","query.do",true);

//get或者post(多用get)，請求的服務器地址，同步(false)或者異步(true)請求

3.發(fā)送請求

send(string)

在使用GET方式請求時無需填寫參數(shù),對數(shù)據(jù)庫無害的時候用get

req.open('get','random.do?max=100‘,true);

req.send();

在使用POST方式時參數(shù)代表著向服務器發(fā)送的數(shù)據(jù)

req.open('post','random.do',true);

req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

//post請求需要設置HTTP頭信息,否則發(fā)送數(shù)據(jù)有問題

req.send('max=100');

4.接收服務器相應數(shù)據(jù)

req.onload = function () {

console.log(req.responseText);

}

index.jsp

$Title$

function getNum() {

var input = document.getElementById("max");

//以ajax的方式(js)，向服務器發(fā)出請求，收到回應(回應中包含服務器生成的隨機數(shù))

//1.創(chuàng)建ajax請求對象

var req = new XMLHttpRequest();

//2.調(diào)用第一步中創(chuàng)建的req對象的open方法，設置連接服務器的信息

//open(method,url,async);method是post或者get,url是鏈接地址，async是true(異步)或者false(同步)

req.open("get","random.do?max="+input.value,true);

//3.真正向服務器發(fā)出該請求

req.send();

//4.處理服務器的回應,服務器回應的數(shù)據(jù)可以在req對象的responseText屬性中獲得

req.onload = function () {

//將該隨機數(shù)顯示在id是num的div中

var div = document.getElementById("num");

div.innerHTML = req.responseText;

}

}

random.do

@WebServlet(name = "randomServlet",urlPatterns = "/random.do")

public class randomServlet extends HttpServlet {

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

String strmax = request.getParameter("max");

int max = Integer.parseInt(strmax);

Random random = new Random();

int num = random.nextInt(max);

PrintWriter printWriter = response.getWriter();

printWriter.println(num);

// request.setAttribute("num",num);

// request.setAttribute("max",max);

// request.getRequestDispatcher("index.jsp").forward(request,response);

}

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

doPost(request,response);

}

}

ajax校驗用戶名是否已存在

index.jsp

$Title$

function check() {

var input = document.getElementById("username");

var req = new XMLHttpRequest();

req.open("get","reg.do?username="+input.value,true);

req.send();

req.onload = function () {

var span = document.getElementById("msg");

if(req.responseText == 1){

span.innerHTML = "用戶名已經(jīng)存在";

span.style.color = "red";

}

else{

span.innerHTML="可以注冊";

span.style.color = "green";

}

}

}

name:

hobby:

reg.do

@WebServlet(name = "regServlet",urlPatterns = "/reg.do")

public class regServlet extends HttpServlet {

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

}

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

String username = request.getParameter("username");

if(username.equals("admin")){

response.getWriter().println(1);

}

else {

response.getWriter().println(0);

}

}

}

總結(jié)

以上是生活随笔為你收集整理的ajax获取返回随机数,AJAX的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。