Ajax的setRequestHeader有什么用？参数可以写什么？_教程

在Ajax应用程序中，XmlHttpRequest对象负责将用户信息以异步通信地发送到服务器端，并接收服务器返回的响应信息和数据。

XMLHttpRequest简介

XMLHttpRequest可以提供不重新加载页面的情况下更新网页，在页面加载后在客户端向服务器请求数据，在页面加载后在服务器端接受数据，在后台向客户端发送数据。XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步返回 Web 服务器的响应，并且能以文本或者一个 DOM 文档形式返回内容。尽管名为 XMLHttpRequest，它并不限于和 XML 文档一起使用：它可以接收任何形式的文本文档。XMLHttpRequest 对象是名为 AJAX 的 Web 应用程序架构的一项关键功能。

XMLHttpRequest和Javascript

Javascript本身并未具备向服务器发送请求的能力，要么使用window.open()方法重新打开一个页面向服务器提交请求，要么使用XMLHttpRequest对象发送请求。不同的是，前者是普通的即同步交互模式，而后者是异步交互方式。

XMLHttpRequest提供了一系列的属性和方法，来向服务器发送异步的http请求；在服务器处理用户请求的过程中，XMLHttpRequest通过属性的状态值来实时反映http请求所处的状态，并根据这些状态指示Javascript做相应的处理；当服务器顺利完成响应用户行为的动作、并将响应数据返回时，XMLHttpRequest提供的response系列方法，可以将这些响应数据以文本、XML Document对象、Ado Stream对象或者unsigned byte数组的方式组装起来，提供给Javascript处理。

XMLHttpRequest的五步使用法：

1、建立XMLHttpRequest对象

2、注册回调函数

3、使用open方法社会自和服务器端交互的基本信息

4、设置发送的数据，开始和服务器端交互

5、在回调函数中判断交互是否结束，响应是否正确，并根据需要过去服务器端返回的数据，更新页面内容

下面我们以用户名确认来实现XMLHttpRequest的五步使用法：

<!DOCTYPE html>

<html>

<head>

var xmlhttp

function submit(){

//1.创建XHLHttpRequest对象

if(window.XMLHttpRequest){

//alert("IE7，IE8 ,FireFox。Mozillar、Safari，Opera")

//IE7，IE8 ,FireFox。Mozillar、Safari，Opera

xmlhttp=new XMLHttpRequest()

if(xmlhttp.overrideMimeType){

xmlhttp.overrideMimeType("text/xml")

}

}else if(window.ActiveXObject){

//IE6,IE6.5 IE5

alert("IE6,IE6.5 IE5")

var activexName= ['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0','msxml2.xmlhttp.3.0','MSXML2.XMLHTTP.2.0',

'MSXML2.XMLHTTP.1.0']

for(var i=0i<activexName.lengthi++){

try{

xmlhttp=new ActiveXObject(activexName[i])

break

}catch(e){

}

if(xmlhttp==undefined||xmlhttp==null){

alert("当前浏览器不支持穿件XMLHttpRequest对象，请更换浏览器")

return

}

//alert(xmlhttp)

//2.注册回调方法

xmlhttp.onreadystatechange=callback

//错误的写法callback()

//记忆一个固定用法，获取文本框中用户输入的内容

var userName=document.getElementById("UserName").value；

//POST方式交互

//3.设置和服务器端交互的相应参数

xmlhttp.open("POST","AjaxServer",true)

//POST方式交互所需要增加的代码

xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded")

//4.设置向服务器端发送的数据，启动和服务器端的交互

xmlhttp.send("name="+userName)

}

function callback(){

//5.判断和服务器端的交互是否完成，还有判断服务器端是否正确返回了数据

if(xmlhttp.readyState==4){

//表示和服务器端的交互已经完成

//服务器返回的http状态码

//200表示“成功”，404表示“未找到”。500表示“服务器内容部错误”

//alert(xmlhttp.status)

if(xmlhttp.status==200){

//表示服务器端的响应代码是200，正确的返回了数据

//纯文本数据的接受方法

var message=xmlhttp.responseText

//XML数据对应的DOM对象的接受方法

//使用前提是，服务器端需要设置content-type为text/xml

//var domXml=xmlhttp.responseXML

alert("bb")

//记忆想div标签填充文本内容的方法

var div=document.getElementById("message")

div.innerHTML=message

}

</script>

</head>

<body>

<br/>

</body>

</html>

创建ajax详细过程：

step1. 创建XMLHttpRequest对象，也就是创建一个异步调用对象；

step2. 创建一个新的HTTP请求，并指定改HTTP请求的方法、URL以及验证信息；

step3. 设置响应HTTP状态变化的函数；

step4. 发送HTTP请求；

step5. 获取异步调用返回的数据；

step6. 使用javascript和DOM实现局部刷新；

例题：

<html>

<head>

<title>AJAX实例</title>

</head>

<body>

</body>

</html>

1.建立IE5、IE6、IE7和FireFox通用的XMLHttpRequest对象

var xmlHttp

function createXmlRequest(){

try{

xmlHttp=new ActiveXObject("Msxml2.XMLHTTP")

}catch(e){

xmlHttp=new ActiveXObjec("Microsoft.XMLHTTP")

}if(!xmlHttp &&typeof XMLHttpRequest!='undefined'){

try{

xmlHttp=new XMLHttpRequest()

}catch(e){

xmlHttp=false

}

</script>

2.建立发送请求

function getText(){

createXmlRequest()

var url="test.do?ti="+t1.value

xmlHttp.open("post",url,true)

xmlHttp.onreadystatechange=f

xmlHttp.send(null)

}

3.接受请求状态

xmlHttp.onreadystatechange=f

function f(){

if(xmlHttp.readyState==4 &&xmlHttp.readyState==200){

alert(xmlHttp.repsonseTest)

}

4.基本Ajax实现

//basic.jsp+

//head+

var xmlHttp

function createXmlRequest(){

try{

xmlHttp=new ActiveXObject("Msxml2.XMLHTTP")

}catch(e){

xmlHttp=new ActiveXObjec("Microsoft.XMLHTTP")

}if(!xmlHttp &&typeof XMLHttpRequest!='undefined'){

try{

xmlHttp=new XMLHttpRequest()

}catch(_e){

xmlHttp=false

}

function getText(){

createXmlRequest()

var url="test.do?t1="+t1.value

xmlHttp.open("post",url,true)

xmlHttp.onreadystatechange=f

xmlHttp.send(null)

//回调方法xmlHttp.onreadystatechange=function(){ }

}

function f(){

if(xmlHttp.readyState==4 &&xmlHttp.Status==200){

alert(xmlHttp.responseText)

}

</script>

//body+

//Servlet.java

package test

import java.io.*

import javax.servlet.*

import javax.servlet.http.*

public class Servlet extends HttpServlet {

public Servlet() {

super()

}

public void destroy() {

super.destroy()// Just puts "destroy" string in log

}

public void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

response.setContentType("text/html")

PrintWriter out = response.getWriter()

String str = request.getParameter("t1")

System.out.println(str)

out.print("Hello:" + str)

out.flush()

out.close()

}

//web.xml+

<servlet-name>Servlet</servlet-name>

<servlet-class>test.Servlet</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>Servlet</servlet-name>

<url-pattern>/test.do</url-pattern>

</servlet-mapping>

5.登录判断逻辑

//login.jsp+

//head+

var xmlhttp

var flag=false

function create(){

xmlhttp=new ActiveXObject("MsXml2.XMLHTTP")//IE5简化

}

function checkName(){

create()

xmlhttp.open("post","checkusername.do?username="+f1.username.value,true)

xmlhttp.onreadystatechange=f

xmlhttp.send(null)

}

function f(){

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

var str=xmlhttp.responseText

var spanNode=document.getElementById("text")

if(spanNode.firstChild!=null){

spanNode.removeChild(spanNode.firstChild)

}

var fontNode=document.createElement("font")

if(str=="用户名已存在"){

fontNode.color="red"

flag=false

}else{

fontNode.color="blue"

flag=true

}

var textNode=document.createTextNode(str)

fontNode.appendChild(textNode)

spanNode.appendChild(fontNode)

}else{

var spanNode=document.getElementById("text")

if(spanNode.firstChild!=null){

spanNode.removeChild(spanNode.firstChild)

}

var fontNode=document.createElement("font")

var textNode=document.createTextNode("loading")

fontNode.appendChild(textNode)

spanNode.appendChild(fontNode)

}

function checkReg(){

if(flag){

return true

}else{

alert("注册失败!请检查注册信息")

return false

}

</script>

//body+

username:<input type="text" name="username" onchange="checkName()"><span id="text"></span><br>

password:<input type="password" name="password"><Br>

</form>

//success.html+

//body+

注册成功!<br>

//Checkusername.java

package org.roger.reg

import java.io.*

import javax.servlet.*

import javax.servlet.http.*

public class Checkusername extends HttpServlet {

public Checkusername() {

super()

}

public void destroy() {

super.destroy()// Just puts "destroy" string in log

// Put your code here

}

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

response.setContentType("text/html")

PrintWriter out = response.getWriter()

out

.println("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">")

out.println("<HTML>")

out.println(" <HEAD><TITLE>A Servlet</TITLE></HEAD>")

out.println(" <BODY>")

out.print("This is ")

out.print(this.getClass())

out.println(", using the GET method")

out.println(" </BODY>")

out.println("</HTML>")

out.flush()

out.close()

}

public void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

response.setContentType("text/htmlcharset=utf-8")

PrintWriter out = response.getWriter()

String username=request.getParameter("username")

if(username.equalsIgnoreCase("tom")){

out.print("用户名已存在")

}else{

out.print("恭喜你")

}

out.flush()

out.close()

}

public void init() throws ServletException {

}

//Reg.java

package org.roger.reg

import java.io.*

import javax.servlet.*

import javax.servlet.http.*

public class Reg extends HttpServlet {

public Reg() {

super()

}

public void destroy() {

super.destroy()// Just puts "destroy" string in log

// Put your code here

}

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

response.setContentType("text/html")

PrintWriter out = response.getWriter()

out

.println("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">")

out.println("<HTML>")

out.println(" <HEAD><TITLE>A Servlet</TITLE></HEAD>")

out.println(" <BODY>")

out.print("This is ")

out.print(this.getClass())

out.println(", using the GET method")

out.println(" </BODY>")

out.println("</HTML>")

out.flush()

out.close()

}

public void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

response.setContentType("text/html")

PrintWriter out = response.getWriter()

System.out.println(request.getParameter("username"))

System.out.println(request.getParameter("password"))

response.sendRedirect("success.html")

out.flush()

out.close()

}

public void init() throws ServletException {

}

//web.xml+

<description>This is the description of my J2EE component</description>

<display-name>This is the display name of my J2EE component</display-name>

<servlet-name>Checkusername</servlet-name>

<servlet-class>org.roger.reg.Checkusername</servlet-class>

</servlet>

<description>This is the description of my J2EE component</description>

<display-name>This is the display name of my J2EE component</display-name>

<servlet-name>Reg</servlet-name>

<servlet-class>org.roger.reg.Reg</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>Checkusername</servlet-name>

<url-pattern>/checkusername.do</url-pattern>

</servlet-mapping>

<servlet-mapping>

<servlet-name>Reg</servlet-name>

<url-pattern>/reg.do</url-pattern>

</servlet-mapping>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/tougao/11343423.html

Ajax的setRequestHeader有什么用？参数可以写什么？

发表评论

评论列表（0条）