浅谈AJAX基本实现流程
1、js中ajax实现流程:
(1) 创建XMLHttpRequest对象,也就是创建一个异步调用对象.
(2) 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
(3) 设置响应HTTP请求状态变化的函数.
(4) 发送HTTP请求。
(5) 获取异步调用返回的数据.
(6) 使用JavaScript和DOM实现局部刷新.
2、创建XMLHttpRequest
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
创建XMLHttpRequest对象:
var xmlhttp;
if (window.XMLHttpRequest)
{//兼容IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest(); }
else
{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); // 兼容 IE6, IE5}
3、向服务器发送请求:
将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法
open(method,url,async);
send(string);
例如:
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
method:请求的类型;GET 或 POST
url:文件在服务器上的位置
async:true(异步)或 false(同步)
post和 get:
与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。然而,在以下情况中,请使用 POST 请求:
a) 无法使用缓存文件(更新服务器上的文件或数据库)
b) 向服务器发送大量数据(POST 没有数据量限制)
c) 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
4、设置响应HTTP请求状态变化的函数
如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:setRequestHeader(header,value)
当使用 async=true 时,请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数:
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
5、服务器响应
如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
来自服务器的响应并非XML时用responseText :
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
来自服务器的响应是XML是用responseXML :
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br />";
}
document.getElementById("myDiv").innerHTML=txt;
转载于:https://www.cnblogs.com/flower-qh/p/7116309.html
浅谈AJAX基本实现流程相关推荐
- ajax感受,有什么缺点,浅谈ajax的优点与缺点
AJAX (Asynchronous Javascript and XML) 是一种交互式动态web应用开发技术,该技术能提供富用户体验. 完全的AJAX应用给人以桌面应用的感觉.正如其他任何技术,A ...
- js 单页面ajax缓存策略,浅谈ajax的缓存机制---IE浏览器方面
这篇文章主要介绍了IE浏览器关于ajax的缓存机制,文中给大家提到了Ajax解决浏览器的缓存问题,解决方法有很多种.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. IE浏览器对于同一 ...
- jquery ajax和servlet,浅谈ajax在jquery中的请求和servlet中的响应
在jsp中,首先,你需要导入jquery的架包: 获取可返回站点的根路径: String path = request.getContextPath(); %> 在jquery中写ajax请求: ...
- ajax机制 缓存,浅谈Ajax的缓存机制
浅谈Ajax的缓存机制 Ajax的缓存机制和浏览器处理资源时的缓存机制是一样的. 三条简单规则: 只要是URL相同的GET请求,浏览器会使用缓存(当然还要看服务器的Cache-Control/Expi ...
- 浅谈AJAX并实现使用pagehelper-5.1.10.jar分页插件实现异步从数据库中获取数据分页显示
AJAX异步请求 什么是ajax 异步 JavaScript 同步和异步的区别 同步方式:正常情况下,浏览器与服务器之间是串行操作,类似于一个Java线程的操作. 异步方式:浏览器与服务器是并行操作, ...
- 浅谈ajax中get与post的区别,以及ajax中的乱码问题的解决方法
一.谈Ajax的Get和Post的区别 Get方式: 用get方式可传送简单数据,但大小一般限制在1KB下,数据追加到url中发送(http的header传送),也就是说,浏览器将各个表单字段元素及 ...
- 浅谈ajax使用方法
众所周知,代码都是从上而下依次同步运行,同步的代码里面无法拿到异步的执行结果. Ajax概念 Ajax就是通过在后台与服务器进行少量数据交换,可以使网页实现异步更新的技术.这意味着可以在不重新加载整个 ...
- 浅谈ajax?贾克斯???
** 什么是ajax?以及它的作用? AJAX全称为"Asynchronous JavaScript and XML"(异步JavaScript和XML),是一种创建交互式网页应用 ...
- 浅谈ajax原理、优缺点
ajax原理: Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面.这其中最关键的一步就是从服务器获得请 ...
最新文章
- MySQL事务隔离级别介绍
- YII2框架表单-model(验证)-HTML_help部件 URL_help部件 以注册页面为实例
- SpringBatch读文件(FlatFileItemReader)写据库(MyBatisBatchItemWriter)(四)
- JVM—内存分配与回收策略
- 红橙Darren视频笔记 builder设计模式 navigationbar 导航栏第二版
- leetcode刷题:除自身以外数组的乘积
- webbench接口并发测试
- windows_xp_sp3下的php环境安装配置
- 在二维码中间添加logo或者图片
- UDS常用诊断服务介绍
- 微信小程序地图添加标记点
- JVM中的GC是什么
- 《研发企业管理——思想、方法、流程和工具》——第1章 企业管理基本理念 1.1 企业的根本目标及其内涵...
- 微信聊天记录没有备份可以恢复吗?吐血整理分享
- 那些看着高大上的名词
- 测试硬盘软件hd不能结束进程,终于解决了HD TUNE以及所有其他硬盘检测工具都不能使用的情况。。...
- 伯禹公益AI《动手学深度学习PyTorch版》Task 05 学习笔记
- GitHub 上值得收藏的100个精选前端项目!
- java inet aton_地址转换函数:inet_aton inet_ntoa inet_addr和inet_pton inet_ntop
- C++ OpenCV特征提取之KAZE和AKAZE的匹配
热门文章
- SVN工具的使用 和在Eclipse中安装GPD插件:(多步审批流,因此选择使用工作流(JBPM)来实现)...
- Silverlight数据加载时,等待图标显示与隐藏(Loading)
- 关于Update语句在不同数据库中的差别
- CentOS下用yum命令安装jdk
- python通过端口和协议查出服务名
- 黑马lavarel教程---13、分页
- Android性能测试-分析工具
- APICloud学习第二天——操作云数据库
- jsp(3,6,9) EL表达式及JSTL
- Python打包工具setuptools的使用