没有合适的资源？快使用搜索试试~ 我知道了~

文库首页开发技术其它Ajax详解及其案例分析

Ajax详解及其案例分析

ajax

html代码

html文件

需积分: 0 0 下载量 52 浏览量 2020-12-11 04:23:00 上传评论收藏 380KB PDF 举报

温馨提示

试读

19页

1 获得Ajax对象 1.1 问题如何获得XmlHttpRequest对象。 1.2 方案区分浏览器，使用不同的获取方式。 1.3 步骤步骤一：新建ajax01.html页面新建一个Web工程，在WebRoot下新建ajax01.html页面。在[removed]标记内编写JavaScript代码实现获取Ajax对象。 [removed] /*获取Ajax对象*/ function getXhr(){ var xhr = null; //确保IE7,IE8，FireFox下可以运行

资源详情

资源评论

Ajax详解及其案例分析详解及其案例分析

1 获得Ajax对象

1.1 问题

如何获得XmlHttpRequest对象。

1.2 方案

区分浏览器，使用不同的获取方式。

1.3 步骤

步骤一：新建ajax01.html页面

新建一个Web工程，在WebRoot下新建ajax01.html页面。在<script>标记内编写JavaScript代码实现获取Ajax对象。

/*获取Ajax对象*/

function getXhr(){

var xhr = null;

//确保IE7,IE8，FireFox下可以运行

if(window.XMLHttpRequest){

xhr = new XMLHttpRequest();

}else{

//确保IE6可以运行，无视更古老的IE浏览器

xhr = new ActiveXObject("Microsoft.XMLHttp");

}

return xhr;

//更简易的写法

//xhr = window.XMLHttpRequest?

// new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHttp");

}

</script>

步骤二：部署项目访问ajax01.html页面

访问页面如图-2所示。

图 – 2

点击链接：

图 – 3

使用IE测试结果如图-4所示。

图 – 4

注意：本次测试使用的是IE11，但IE的早期5.5，6.0版本创建的都是ActiveXObject类型的。从IE7开始支持创建

XMLHttpRequest的方式来获取Ajax对象。

1.4 完整代码

ajax01.html文件代码如下：

<html>

<head>

/*获取Ajax对象*/

function getXhr(){

var xhr = null;

//确保IE7,IE8，FireFox下可以运行

if(window.XMLHttpRequest){

xhr = new XMLHttpRequest();

}else{

//确保IE6可以运行，无视更古老的IE浏览器

xhr = new ActiveXObject("Microsoft.XMLHttp");

}

return xhr;

//更简易的写法

//xhr = window.XMLHttpRequest?

// new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHttp");

}

</script>

</head>

<body>

<a href="javascript:;" onclick="alert(getXhr());"> 获取Ajax对象 </a>

</body>

</html>

2 使用Ajax对象发送GET请求

2.1 问题

使用Ajax对象发送GET类型的请求，从服务器端获取一小段文本。

2.2 方案

遵循创建Ajax对象，创建请求，设置回调函数，发送请求的步骤来完成一次异步请求。

2.3 步骤

步骤一：新建ajax02.html页面

步骤二：添加getText()方法，并补充超链接对该方法的调用

<html>

<head>

function getXhr(){

var xhr = null;

if(window.XMLHttpRequest){

xhr = new XMLHttpRequest();

}else{

xhr = new ActiveXObject("Microsoft.XMLHttp");

}

return xhr;

}

function getText(){

//1.获取Ajax对象

var xhr = getXhr();

//2.设置回调函数

xhr.onreadystatechange=function(){

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

var txt = xhr.responseText;

alert(txt);

}

};

//3.创建请求

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

//4.发送请求

xhr.send(null);

}

</script>

</head>

<body>

</body>

</html>

步骤三：编写ActionServlet类

package 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 ActionServlet extends HttpServlet {

public void service(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

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

PrintWriter out = response.getWriter();

//获取请求资源路径

String uri = request.getRequestURI();

String path = uri.substring(

uri.lastIndexOf("/"),

uri.lastIndexOf("."));

if(path.equals("/get_text")){//get请求

out.println("get请求-服务器返回的数据");

}

out.close();

}

剩余18页未读，继续阅读

评论收藏

内容反馈

Ajax详解及其案例分析

评论0

最新资源

Ajax详解及其案例分析

评论0

最新资源

相关推荐

最新Python3.5零基础+高级+完整项目（28周全）培训视频学习资料

Python3网络爬虫基础+实战案例 Scrapy、Flask、PySpider、Tushare

Python3网络爬虫案例实战课程 视频+文档+源码

asp.net知识库

PHP100视频教程全集112集BT种子【PHP经典】

性能测试进阶指南——LoadRunner11实战 part1

性能测试进阶指南——LoadRunner11实战 part2

性能测试进阶指南——LoadRunner11实战 part3

亮剑.NET深入体验与实战精要2

亮剑.NET深入体验与实战精要3

JavaWeb实战开发

精通JS脚本之ExtJS框架.part2.rar

Qt 5实现串口调试助手 （源工程文件、0积分下载）

【SystemVerilog】路科验证V2学习笔记（全600页）.pdf

AutoSAR标准协议4.2.2

光伏-储能并网系统仿真.rar

GD32替换STM32注意事项.pdf

NPPJSONViewer.zip

XCP协议的规范文档

VS2015安装证书，JavaScript_ProjectSystem.msi，JavaScript_LanguageService.msi

CANoe通过CAPL脚本实现自动测试

蓝牙BLE协议中文版.pdf

BaiduOCR.zip

AD20官方中文教程.pdf

电路分析基础第二版PDF电子书免费下载

七参数坐标转换工具（可在WGS84、北京54、西安80、CGCS2000坐标系中任意两个转换）

完整版 Microsoft.ACE.OLEDB.12.0 驱动下载.rar

Tangent免费.rar

CMSIS-DAP使用说明及驱动.rar

Python3网络爬虫案例实战课程视频+文档+源码

Qt 5实现串口调试助手（源工程文件、0积分下载）