ajax=1,ajax专栏1

一、什么是ajax？有什么作用？

ajax中文翻译为：异步的js和xml。用于网页向服务器发送请求(可支持同步和异步2种方式)，接收服务器响应后的处理数据。

注：同步，网页发送请求后，锁定当前网页(不能继续操作)；异步，网页发送请求后，可以继续操作网页发送请求。

二、如何获得ajax对象？

ajax

获取ajax对象

function getXhr() {

var xhr;

xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHttp");

return xhr;

}

这段代码的逻辑是：点击页面中的链接时，调用onclick事件中的getXhr()方法，返回一个xhr对象。

这里要注意的是href="javascript:;"这句代码代表点击链接时什么也不执行(跳转)。

for example:点击链接后不跳转

三、使用XMLHttpRequest(xhr)对象发送get请求？

步骤：

1、获得XMLHttpRequest对象；

2、为XMLHttpRequest绑定回调函数；

3、创建请求；

4、发送请求；

前端：获取服务端文本数据

function getXhr() {

var xhr;

xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHttp");

return xhr;

}

function getText() {

var xhr = getXhr();

xhr.onreadystatechange = function () {

if(xhr.readyState==4&&xhr.status==200){

var txt = xhr.responseText;

alert(txt);

}

};

xhr.open("get","get_text.do",true);

xhr.send(null);

}

服务端：package controller;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import java.io.IOException;

import java.io.PrintWriter;

public class ActionServlet extends HttpServlet {

@Override

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

request.setCharacterEncoding("utf-8");

response.setCharacterEncoding("utf-8");

response.setContentType("text/html;charset=utf-8");

PrintWriter out = response.getWriter();

String uri = request.getRequestURI();// /test/get_text.do

System.out.println(uri);

String path = uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));

if(path.equals("/get_text")){

out.println("这是来自服务端的数据");

}

out.close();

}

}web-app PUBLIC

"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"

"http://java.sun.com/dtd/web-app_2_3.dtd" >

Archetype Created Web Application

ActionServlet

controller.ActionServlet

ActionServlet

/

效果图：

四、使用XMLHttpRequest(xhr)对象发送post请求？

步骤：

1、获得XMLHttpRequest对象；

2、为XMLHttpRequest绑定回调函数；

3、创建请求；

4、手动添加请求头

5、发送请求；name-valuepost请求方式获取服务端数据

function getXhr() {

var xhr;

xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHttp");

return xhr;

}

function () {

var xhr = getXhr();

xhr.onreadystatechange = function () {

if(xhr.readyState==4&&xhr.status==200){

var text = xhr.responseText;

alert(text);

}

};

xhr.open("post","post_text.do",true);

xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");

xhr.send("name=zhoujie");

}

使用链接的方式提交请求为get请求！！所以点击链接返回不了数据。

function getXhr() {

var xhr;

xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHttp");

return xhr;

}

function getPostData() {

var xhr = getXhr();

xhr.onreadystatechange = function () {

if(xhr.readyState==4&&xhr.status==200){

var text = xhr.responseText;

alert(text);

}

};

xhr.open("post","post_text.do",true);

xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");

xhr.send("name=1");

}

package controller;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import java.io.IOException;

import java.io.PrintWriter;

public class ActionServlet extends HttpServlet {

@Override

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

request.setCharacterEncoding("utf-8");

response.setCharacterEncoding("utf-8");

response.setContentType("text/html;charset=utf-8");

PrintWriter out = response.getWriter();

String uri = request.getRequestURI();// /test/get_text.do

System.out.println(uri);

String path = uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));

if(path.equals("/get_text")){

out.println("这是来自服务端的数据");

}else if(path.equals("/post_text")){

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

out.println(name);

}

out.close();

}

}web-app PUBLIC

"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"

"http://java.sun.com/dtd/web-app_2_3.dtd" >

Archetype Created Web Application

ActionServlet

controller.ActionServlet

ActionServlet

/

WHY??