1. XMLHttpRequest对象创建
所有现代浏览器均支持XMLHttpRequest对象(IE5和IE6使用ActiveXObject)。
XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
2. XMLHttpRequest对象请求后台
open(method,url,async)规定请求的类型、URL以及是否异步处理请求。
method：请求的类型；GET或POST
url：文件在服务器上的位置
async：true(异步)或false(同步)
send(string)将请求发送到服务器。
string：仅用于POST请求GET还是POST？
与POST相比，GET更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用POST请求：
1) 无法使用缓存文件(更新服务器上的文件或数据库)
2) 向服务器发送大量数据(POST没有数据量限制)
3) 发送包含未知字符的用户输入时，POST比GET更稳定也更可靠
setRequestHeader(header,value)向请求添加HTTP头。
header:规定头的名称
value:规定头的值
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");异步-True或False？
AJAX指的是异步JavaScript和XML(AsynchronousJavaScriptandXML)。
为True的话，表示的是异步，异步表示程序请求服务器的同时，程序可以继续执行；能提高系统的运行效率；
为False的话，表示同步，JavaScript会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。
我们一般都是用True；
ajax.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 loadName(){
var xmlHttp;
if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}else{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
alert("readState状态："+xmlHttp.readyState+";status状态："+xmlHttp.status);
xmlHttp.onreadystatechange=function(){
alert("readState状态："+xmlHttp.readyState+";status状态："+xmlHttp.status);
if(xmlHttp.readyState==4 && xmlHttp.status==200){
alert(xmlHttp.responseText);
document.getElementById("name").value=xmlHttp.responseText;
}
};
// xmlHttp.open("get", "getAjaxName?name=jack&age=11", true);
// xmlHttp.send();
// xmlHttp.open("post", "getAjaxName?name=jack&age=11", true);
// xmlHttp.send();
xmlHttp.open("post", "getAjaxName", true);
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlHttp.send("name=jack&age=11");
}
</script>
</head>
<body>
<div style="text-align: center;">
<div><input type="button" onclick="loadName()" value="Ajax获取数据"/> <input type="text" id="name" name="name" /></div>
</div>
</body>
</html>
web.xml
<servlet>
<servlet-name>getAjaxNameServlet</servlet-name>
<servlet-class>com.andrew.web.GetAjaxNameServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>getAjaxNameServlet</servlet-name>
<url-pattern>/getAjaxName</url-pattern>
</servlet-mapping>
GetAjaxNameServlet.java
package com.andrew.web;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class GetAjaxNameServlet extends HttpServlet{
private static final long serialVersionUID = 1L;
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String name=request.getParameter("name");
String age=request.getParameter("age");
System.out.println("name="+name);
System.out.println("age="+age);
response.setContentType("text/html;charset=utf-8");
PrintWriter out=response.getWriter();
out.println("ajax返回的文本");
out.flush();
out.close();
}
}
http://localhost:8080/HeadFirstAjaxJsonChap02/ajax.jsp
页面显示：
ajax返回的文本
后台打印：
name=jack
age=11
alert弹窗：
readState状态：0;status状态：0
readState状态：1;status状态：0
readState状态：2;status状态：200
readState状态：3;status状态：200
readState状态：4;status状态：200
ajax返回的文本
分享到：
相关推荐
javaScript 实现无刷新， Ajax核心知识学习必备知识，必看的哦！
《Ajax从入门到精通》作为比较全面的Ajax教程书籍，涵盖了基本语言介绍（JavaScript）、DHTML技术（DOM）、Ajax技术核心知识、面向对象的JavaScript、数据组织方式（XML和JSON）等知识，并对开发工具和调试技巧以及...
Ajax的概念是asynchronous javascript and xml的简写。 不是一项具体的技术，而是几门技术的综合应用。 其核心只不过是要在javascript中调用一个XMLHttpRequest的javascript类，这个类可以与Web服务器使用HTTP协议...
讲述Ajax技术的概念和核心知识，有部分的代码讲解，清晰易懂，希望对各位有所帮助
本书不仅从ajax的客户端和服务器端技术两个方面指导读者逐步掌握ajax基础应用，还通过实例详细演示了ajax表单验证...本书适合已经掌握php、xml、javascript和mysql基础知识，并想要了解ajax核心和工作原理的读者阅读。
本书介绍的内容非常全面，覆盖了Ajax技术的各个方面，包括Ajax技术的核心对象XMLHttpRequest对象、JavaScript脚本的详细知识以及DOM和XML的相关知识。除了Ajax的这些基础知识外，本书还详细介绍了Ajax的5个相关框架...
我做ajax的讲座的ppt，有兴趣的...谈了对web应用的重新认识，web的特点，用户的需求，互联网web应用的趋势，ajax在web中的应用，什么是ajax，ajax的知识结构，ajax的核心XHR实现异步，ajax的框架，ajax的未来，air技术
本书以AJAX为核心阐述对象，介绍了它对JavaScript所做的各种扩展，还介绍了在ASP.NET环境下创建客户端应用所需的一些核心控件。通过大量的实例，本书详述了AJAX的内部机制，并且紧跟时代潮流，重点描述了如何依靠...
本文主要是给大家总结了一下Ajax的核心内容XMLHttpRequest的相关知识，十分的详细，推荐给大家，需要的小伙伴参考下。
通过带着读者编写分页Web Project，使用MODEL1开发模式，并了解AJAX核心原理。在编码的过程中能理清数据的生命周期，明白在指定页面应做怎样的变换，尽量简化代码实现过程。
内含知识文档，学习视频，ppt，示例(原代码),非常好!!!!!!
由于jQuery ajax模块有800+行，而核心函数jQuery.ajax就有380+行，直接分析这段代码很容易被代码逻辑弄晕。 所以我们先分析一段简单的ajax代码，来自早期的百度七巧板项目。 通过这个来先复习一遍ajax的知识。 ...
随着你继续阅读本书，将逐渐建立核心概念。 现在你已经了解了表单提交、动态服务器请求和受限的客户端JavaScript等相关内容，具备了可以 用来实现某些有价值函数的大量基础知识了。 向用户提供一种同时与客户端技术...
项目的核心是模糊逻辑，这是一种利用专家（医生）知识库的软计算技术。,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml和javascript。它用于创建动态网页，其中网页的小部分在不...
假定您具有PHP，XML，JavaScript和MySQL的基础知识，这本书将帮助您了解AJAX的核心原理以及构成技术如何协同工作。
php+ajax完全自学手册 涵盖基础知识，核心技术，典型实例等内容 本资料包括6和15章
XMLHttpRequest 是 AJAX应用程序的核心，而且对很多读者来说可能还比较陌生，我们就从这里开始吧。从 清单 1 可以看出，创建和使用这个对象非常简单，不是吗？等一等。 还记得几年前的那些讨厌的浏览器战争吗？...
创建 XMLHttpRequest 对象04-使用phpstorm工具来开发05-Get方法和读取中文乱码解决06-Post方法和小坑的解决07-XMLHttpRequest请求知识点08-读取xml文件和缓存的清除09-onreadystatechange事件回调函数10-AJAX PHP...
在ajax中有一个最为核心的概念就是 XMLHttpRequest 对象，这篇文章将有助于我们更加深入的理解 ajax 的知识