[AJAX]:入门小实例,走进AJAX

由于考研，一段时间不摸键盘了，今天复习一下AJAX。写在51CTO，记录我的生活点滴。

实例说明：通过一步刷新的方式，将页面输入的内容返回到页面并显示。当然js很容易实现。

一：代码部分：

html:部分

<html>

<head>

<!--

<linkrel="stylesheet" type="text/css" href="styles.css">

-->

</head>

<body>

<br />

<br/>

</div>

数据显示区

</div>

</script>

</body>

</html>

2.js脚本部分

var xmlHttp = null;

function submit() {

if(window.ActiveXObject){

xmlHttp = new window.ActiveXObject("Microsoft.XMLHTTP");

}

else if(window.XMLHttpRequest){

xmlHttp = new window.XMLHttpRequest();

}

var userName = document.getElementById("username").value;

var psw = document.getElementById("psw").value;

alert(userName);

alert(psw);

xmlHttp.onreadystatechange= dealData;

xmlHttp.open("post","./servlet/first",true);

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

xmlHttp.send("username="+userName+"&psw="+psw);

}

function dealData(){

if(xmlHttp.readyState == 4){

if(xmlHttp.status == 200){

alert("已经进入200");

var datass = xmlHttp.responseText;

document.getElementById("show").innerHTML = datass;

}

else{

alert("错误");

}

else{

alert("round");

}

</script>

3.servlet部分

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;

publicclassFirst extendsHttpServlet{

/**

privatestaticfinallongserialVersionUID= 1L;

@Override

protectedvoiddoPost(HttpServletRequest req,HttpServletResponse resp)

throws ServletException,IOException {

process(req,resp);

}

@Override

protectedvoiddoGet(HttpServletRequest req,resp);

}

protectedvoidprocess(HttpServletRequest req,IOException {

String userName = req.getParameter("username");

String psw = req.getParameter("psw");

System.out.println("usename:"+userName);

PrintWriter pw = resp.getWriter();

pw.write("username:"+userName+";psw="+psw);

pw.flush();

}

二、解释：

XMLHttpRequest对象是ajax异步实现的精髓，XmlHttpRequest使你可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户，使页面不刷新即可实现更新；

2. 因为各公司对其实现不一样，主要分微软IE和非微软IE浏览器（尤其是早期的IE5,IE6，IE5 和 IE6 使用 ActiveXObject）

首先，这些对象都是内嵌在浏览器中，属于window所属，所以在获取时应对其进行获取，当然获取时先进行IE版本的判断

Var xmlHttp =null;

<!―进行IE5,ie6的判断--->

If(window.ActiveXObject){//若是该版本，则

XmlHttp = newwindow.ActiveXObject(“Microsoft.XMLHTTP”);

}

Else if(window.XMLHttpRequest){//若是非IE5,IE6版本

xmlHttp = newwindow.XMLHttpRequest();

}

Else{

Alert(“您的浏览器暂不支持ajax技术，请升级”);

}

3.获取完成，当然是使用了，先设置好所需属性，例：

返回处理的函数（回调函数），以及需要访问的url，传值方式，以及所传值的获取等。

正如上述：

<!―获取所需传到后台的参数-->

Var username = document.getElementById(“username”).value;

Var password = document.getElementById(“psw”).value;

<!―设置回调函数--->

xmlHttp.onreadystatechange = 回调函数（注意：不带括号）;

<!―设置传值方式以及url-->

调用xmlHttp对象去访问地址，或后台内容获取数据

首先，设置get方式传值：

Var url = “./servlet/first?username =”+userName+“&password=”+password;

xmlHttp.open(“get”,url,true);

//发送参数值：当然get方式本身将参数拼接到url后面了，所以此处设置为null即可

xmlHttp.send(null);

设置为POST传值方式：

Var url = “./servlet/first”;

xmlHttp.open(“post”,true);

但是还比get方式多了一步操作:设置http数据报文的头部格式:即http报文中得属性，根据需要设置即可

XmlHttp.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);

Post方式需要通过send(进行传值)，所以需要将属性值放入send()中：

Var value =”username=”+username+”&password=”+password;

xmlHttp.send(value);

4: 编写回调函数：XMLHttpRequest函数返回类型有几种：responseText,responseXML,responseUrl.

下面章节会分类讲解，现在主要演示responseText:以帮助读者理解ajax的整个处理过程

XMLHttpRequest类拥有一个显示XMLHttpRequest对象状态的属性，即：readyState:

When：

XMLHttpRequest.readyState = 0: 表示“XMLHttpRequest”对象的一种未初始化状态，即：已经创建了它的对象，但未进行初始化

XMLHttpRequest.readyState = 1: 表示一种“未发送”状态：即：XMLHttpRequest.open()方法已经调用，但还未发送。并且XMLHttpRequest已经准备好把一个请求发送到服务器

XMLHttpRequest.readyState =2: 表示一种“已发送”状态，即：XMLHttpRequest.send()方法

已经调用，并且已经通过send()方法把一个请求发送到服务器端，但是还没有收到一个响应。

XMLHttpRequest.readyState=3: 表示一种“正在接收，未解析完”的状态，即：浏览器已经接收完目标服务器发来的HTTP报文的相应头部部分，但HTTP报文的消息体部分还未接收加载完

XMLHttpRequest.readyState= 4: 表示一种“已接收并且解析加载完”的状态，但是此时由于服务器会在返回的HTTP响应报文中 添“响应码”以表明请求资源当前的状态，所以这种情况下需要再分类进行解析

单独解析XMLHttpRequest.readyState= 4时的各种情况

根据XMLHttpRequest.status属性进行解析：

When:

XMLHttpRequest.status = 404:说明请求资源不存在

XMLHttpRequest.status = 200：表示已经顺利完成访问服务器后，顺利返回未发生异常

其他响应码代表的含义：请参见http协议

代码书写：

function dealMethod(){

if(xmlHttp.readyState == 4){

if(xmlHttp.status == 200){

var responseData = xmlHttp.responseText；

<!―对前台进行操作 -->

document.getElementById(“show”).innerHTML = responseData;

}

小弟排版不大好，请见谅哈。

原文链接：https://www.f2er.com/ajax/164838.html

[AJAX]:入门小实例,走进AJAX

猜你在找的Ajax相关文章