AJAX基础与实践(三)

最新推荐文章于 2024-09-11 11:57:15 发布
最新推荐文章于 2024-09-11 11:57:15 发布
阅读量139 收藏
点赞数
分类专栏： Ajax 文章标签： Ajax 应用服务器 JavaScript Microsoft Safari ViewUI
 

创建XHR发送请求

Ø 如下：

<script　type="text/javascript">

var　xmlHttp;

//创建一个XMLHttpRequest对象　

function　createXMLHttpRequest()　{

//　For　Internet　Explorer　5.5,　6,　7　

　　　　if　(window.ActiveXObject)　{

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

　　　　}　

//　For　Mozilla,　Firefox,　Safari,　Netscape

　　　　else　if　(window.XMLHttpRequest)　{

　　　　　　　　xmlHttp　=　new　XMLHttpRequest();

　　　　}

}　　

</script>

AJAX发送请求

Ø 如下：

function　startRequest()　{

　　　　createXMLHttpRequest();

//注册回调事件处理器　

　　　　xmlHttp.onreadystatechange　=　handleStateChange;

//使用Open()方法初始化XMLHttpRequest对象-指定HTTP方法

//和要使用的服务器URL　

　　　　xmlHttp.open("GET",　"innerHTML.xml",　true);

//send()方法发送该请求　

　　　　xmlHttp.send(null);

}

应用GET　POST发送请求

Ø 方法如下：

方法名

描述

getElementById(id) (document)

获取有指定唯一ID属性值文档中的元素

getElementsByTagName(name)

返回当前元素中有指定标记名的子元素的数组

hasChildNodes()

返回一个布尔值，指示元素是否有子元素

getAttribute(name)

返回元素的属性值，属性由name指定

处理服务器晌应

XMLHttpRequest　提供了两个可以用来访问服务器响应的属性.

Ø responseText　：将响应提供为一个串。

Ø responseXML：将响应提供为一个XML　对象。

使用innerHTML　属性创建动态内容

Ø responseText　＋　innerHtml，

服务器　"生产"或生成HTML　内容，

浏览器使用　innerHTML来"消费"或处理。

DEMO　responseText　＋　innerHtml

Ø innerHTM.html

<!DOCTYPE　html　PUBLIC　"-//W3C//DTD　XHTML　1.0　Strict//EN"

　　"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

         <head>

                   <title>Using responseText with innerHTML</title>

                   <META http-equiv=Content-Type content="text/html; charset=GBK">

<script 　type="text/javascript">

var　xmlHttp;

function　createXMLHttpRequest()　{

　　　　if　(window.ActiveXObject)　{

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

　　　　}　

　　　　else　if　(window.XMLHttpRequest)　{

　　　　　　　　xmlHttp　=　new　XMLHttpRequest();

　　　　}

}　　

function　startRequest()　{

　　　　createXMLHttpRequest();

　　　　xmlHttp.onreadystatechange　=　handleStateChange;

　　　　xmlHttp.open("GET",　"innerHTML.txt",　true);

　　　　xmlHttp.send(null);

}

function　handleStateChange()　{

　　　　if(xmlHttp.readyState　==　4)　{

　　　　　　　　if(xmlHttp.status　==　200)　{                                        

　　　　　　　　　　　　document.getElementById("results").innerHTML　=　xmlHttp.responseText;

　　　　　　　　}

　　　　}

}

</script>

         </head>

         <body>

                   <form 　action="#">

                            please content:<input 　type="button" 　value="Search　for　Today’s　Activities" οnclick="startRequest();" />

                            <span id="results"></span>

                   </form>

         </body>

</html>

Ø innerHTML.txt

请输入内容！！！

Ø 输出结果：






作者：周大庆（zhoudaqing）
网址： http://www.blogjava.net/yifeng
>>> 转载请注明出处！<<<
zhoudqCN
关注
专栏目录
Ajax基础
Llishiyi的博客
12-17 1272
1.Ajax介绍 (1)、老版的请求 代web程序最初的目的就是将信息（数据）放到公共服务器上，让所有的网络 用户都可以通过浏览器访问。 我们一般都是通过以下方式让浏览器发送服务器请求，获得服务器数据 1、地址栏输入地址 2、特定元素的href或者src属性 3、表单提交 弊端：这些方案我们很难通过代码的方式进行编程，而且每次请求都会刷新网 页。 (2)、什么是Ajax 异步请求 局部更新 1、AJAX(AsynchronousJavaScriptandXML)异步的JavaScript和XML.
【AJAX】AJAX入门基础知识
weixin_58214412的博客
03-06 1121
1.AJAX介绍与网页应用 2.XML的介绍 3.AJAX的优缺点 4.HTTP协议请求报文与响应文本结构 5.Chrome网络控制台查看通信报文 6.Nodejs的安装与介绍 7.express框架介绍与基本使用 8.AJAX案例准备 9.AJAX请求的基本操作 10.AJAX设置请求参数 11.AJAX发送POST请求 12.AJAX-POST设置请求体 13.AJAX设置请求头信息 14.服务器端响应JSON数据 15.nodemon自动重启工具安装 16.AJAX-IE缓存问题解决
深入探讨AJAX：从基础到现代前端框架实践
weixin_33750664的博客
09-11 1127
本文还有配套的精品资源，点击获取 简介：《AJAX高级程序设计》是为已有基础的学习者准备的深入探讨AJAX技术的专业书籍。本书不仅回顾AJAX基本概念，还深入讲解了JavaScript与DOM操作、JSON与XML的数据处理、异步处理与回调函数、AJAX安全与优化策略以及现代前端框架中的AJAX集成，最终总结了AJAX开发的最佳实践。这本书为构建高效、流畅的Web应用程序提...
在Ruoyi中采用Ajax动态生成Echarts图表实践
热门推荐
夜郎King的博客
08-05 1万+
文将以Ruoyi框架为例，深入讲解基于Ajax技术，实现数据的动态接入，让读者了解如何进行数据的动态接入代码实战开发
掌握AJAX技术：从基础到实战
2301_80064376的博客
07-26 1020
在现代Web开发中，AJAX（Asynchronous JavaScript and XML）技术已经成为一个不可或缺的工具。**它不仅提升了用户体验，还显著提高了网页的动态交互能力**。本文将为初学者详细介绍AJAX技术的基础知识，并通过简单的实例帮助大家快速上手。
vue的axios进行ajax请求----ajax请求篇（三）
smallmww的博客
08-10 389
一、在vue框架中首先需要先安装依赖。二、在项目中的main.js中引用。三、在页面中进行使用。
【Ajax基础】解决wampserver无法启动问题
ljs_coding
03-28 1158
前言 最近在学习ajax基础，其中第一部分是关于服务器环境搭建的，涉及到wampserver的安装。但是实践的时候出现了一些问题，自始自终出现的提示都是could not execute menu item(internal Error)服务无法启动，解决步骤记录如下。 1 图标无法变绿 和已有的mysql出现了冲突，所以手动在任务管理器中关闭了mysql相关的进程。 默认浏览器未更改，可以在安...
Ajax面试题
golove666的博客
04-06 1154
Ajax高频面试题。
WEB应用程序开发(四)客户端与浏览器异步(Ajax)交互实践
qq_51352148的博客
12-14 2198
WEB应用程序开发之客户端与浏览器交互客户端与浏览器交互方式1.同步交互2.异步交互(ajax)创建XMLHttpRequest对象第一步第二步第三步第四步总结思绪图 客户端与浏览器交互方式 1.同步交互 例如超链接,表单请求服务器程序,向客户端做出响应,响应的内容会覆盖原来的页面内容,会打断客户端正常操作,不友好. 2.异步交互(ajax) 客户端与服务器之间交互时,服务器向客户端响应内容,不影响客户端正常操作 Ajax 全称为：“Asynchronous JavaScript and XML”（异步Ja
前后端交互ajax和axios入门讲解，以及http与服务器基础
qq_45793481的博客
09-25 1521
前后端交互（从入门到实践详细解析） 文章目录前后端交互（从入门到实践详细解析）前言一、Ajax和HTTP1.1 客户端和服务器1.2 URL地址1.3 服务器和客户端的通信过程1.4 什么是Ajax1.5 jQuery中的Ajax1.6 接口总结 前言 学着一段时间的前端，发现做项目的话如果没有后端服务器相关的知识概念的话很难做好并理解一个项目，一个完整的项目时时刻刻都在用到着前后端交互的内容，例如node，ajax和http，npm等等。之前看到或者听到这些东西都是懵懵懂懂，所以近段时间特意去学习了下
14ajax课程_AJAX基础_
10-02
**AJAX基础详解** 在现代Web开发中，AJAX（Asynchronous JavaScript and XML）是一种核心技术，它使得网页能够实现异步数据交换，无需刷新整个页面即可更新部分内容。本教程将深入探讨AJAX的基础知识，帮助你理解其...
Ajax基础教程之封装(三)
10-22
在本篇“Ajax基础教程之封装(三)”中，我们将探讨如何将常见的Ajax请求进行封装，以便在多个地方重用代码并提高效率。Ajax（Asynchronous JavaScript and XML）是一种在不刷新整个页面的情况下与服务器交换数据并...
ajax基础与实践教程(含php json实例)
11-09
在"ajax基础与实践教程(含php json实例)"中，可能包含了如何使用Ajax与PHP结合，通过JSON进行数据交换的详细步骤。例如，创建一个PHP脚本生成JSON数据，然后在JavaScript中创建Ajax请求，解析返回的JSON数据并更新...
Ajax的入门与实践.pdf
01-01
Ajax 入门与实践 Ajax 是基于 XML 的异步 JavaScript， 是当前 Web 创新的重要组成部分。Ajax 这个术语源自描述从基于同页的 Web 应用到基于数据应用的转换。在基于数据的应用中，用户需要的数据，如联系人列表，...
ajax框架与实践
11-23
涵盖Web应用的发展，Ajax基础，Web通讯，XMLHttpRequest对象详解，同时详细讲解和推荐了Ajax开发工具箱，例如JSDoc,Firefox拓展，DOMInspector，JSLint等等，以及JsUnit测试等。同时为了提升前端技术，第八章详细...
27-移动机械手轨迹跟踪自适应神经PD控制器 运行所提出的自适应神经控制器的主要脚本是main-Single-ANN和main
最新发布
10-03
27-移动机械手轨迹跟踪自适应神经PD控制器 运行所提出的自适应神经控制器的主要脚本是main_Single_ANN和main_Multilayer_ANN。 比较的控制器在脚本 main_CPID 和 main_PID 中给出。 仿真结果在名为“比较结果”的文件夹中给出。 实际实验的结果在名为“实验结果”的文件夹中给出。 请运行 main.m 脚本以获取以图形和表格形式呈现的结果。 保证成功运行
基于Java语言的IT行业新闻资讯类设计源码
10-03
该项目是一款基于Java语言的新闻资讯类应用程序设计源码，共包含343个文件，其中Java源文件281个，XML配置文件37个，YAML文件18个，FreeMarker模板文件3个，配置工厂文件2个，Git忽略文件1个，以及Dockerfile文件1个。该系统专注于新闻资讯类应用的开发，适用于各类新闻资讯平台的搭建。
基于Java的SaaS短链接管理系统设计源码
10-03
该项目是一款基于Java核心技术的SaaS短链接管理系统源码，总计包含219个文件，涵盖188个Java源文件、14个XML配置文件、11个YAML文件、2个SQL文件、1个.gitignore配置文件、1个Markdown文件、1个Lua脚本和1个HTML文件。该系统致力于为企业和个人用户提供便捷、安全的短链接管理服务，简化长链接操作，并具备强大的数据分析与跟踪功能，包括PV、UV、UUI等关键数据统计，助力用户优化链接管理，提升营销效果和业务成果。
风光储共交流母线制氢模型，光伏，风机采用mppt实现最大功率跟踪；储能采用电压电流双闭环控制；并网采用pq控制，整流采用svpw
10-03
风光储共交流母线制氢模型，光伏，风机采用mppt实现最大功率跟踪；储能采用电压电流双闭环控制；并网采用pq控制，整流采用svpwm调制。 制氢可接pem~碱性电解槽。
构建交互式Web应用：AJAX基础与实践
AJAX基础教程主要涵盖了以下几个关键知识点： 1. **AJAX的构成**：AJAX并不是单一的技术，而是由HTML、JavaScript、DHTML（Dynamic HTML）和DOM（Document Object Model）四种技术共同构成的。HTML提供网页结构，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值