浅谈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;
浅谈AJAX基本实现流程的更多相关文章
- 浅谈AJAX的基本原理和原生AJAX的基础用法
一.什么是AJAX? AJAX,即"Asynchronous Javascript And XML",翻译为异步的JavaScript和XML,是一种创建交互式网页应用的网页开发技 ...
- 浅谈ajax
Ajax 回顾 最本质的 ajax 其实是这样的: function Ajax(){ var xmlHttpReq = null; if (window.ActiveXObject){//IE5 IE ...
- 浅谈ajax的优点与缺点
AJAX (Asynchronous Javascript and XML) 是一种交互式动态web应用开发技术,该技术能提供富用户体验. 完全的AJAX应用给人以桌面应用的感觉.正如其他任何技术,A ...
- 浅谈Ajax 异步的几点细节
1.浏览器执行到Ajax代码的这行语句的时候,发出了一个HTTP请求,欲想请求服务器上的数据.服务器此时开始I/O,所谓的I/O就是磁盘的读写,需要花费一些时间,所以不会立即产生下行的HTTP报文: ...
- 浅谈ajax同步、异步的问题
最近实习的时候看到过firefox的同步.异步的警告,想着概念不是那么清楚,于是整理了一下ajax同步异步方面的知识.我是小白,做个笔记. 首先就是概念问题,ajax根据async进行区分同步和异步过 ...
- 浅谈HTTP与其工作流程
一.什么是HTTP协议 HTTP协议(Hyper Text Transfer Protocol)翻译过来是超文本传输协议,也是一种restful风格的协议,在web开发和APP接口开发都很常用. HT ...
- 浅谈JS之AJAX
0x00:什么是Ajax? Ajax是Asynchronous Javascript And Xml 的缩写(异步javascript及xml),Ajax是使用javascript在浏览器后台操作HT ...
- $.ajax()方法详解 ajax之async属性 【原创】详细案例解剖——浅谈Redis缓存的常用5种方式(String,Hash,List,set,SetSorted )
$.ajax()方法详解 jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为Str ...
- 浅谈Websocket、Ajax轮询和长轮询(long polling)
浅谈Websocket.Ajax轮询和长轮询(long p0ll) 最近看到了一些介绍Websocket的文章,觉得挺有用,所以在这里将自己的对其三者的理解记录一下. 1.什么是Websocket W ...
随机推荐
- springboot调用http方式
1.httpclient 2.okhttp 3.feign 安装Gradle包 compile 'org.springframework.cloud:spring-cloud-starter-open ...
- IDEA 小白采坑
IDEA Debug状态下,断点第一次可以进去,之后都不能进去 调试时候不要用Ctrl+F9,如果是点击Tool Windows 上的图标的话,也要注意改图标的快捷键是不是Ctrl+F9 Ctrl+F ...
- .NET Core在安装(VS2015)与部署
.NET Core开发环境搭建 使用VS2015开发.NET Core项目,环境的搭建可以参考官网,大致安装步骤如下: 1.首先你得装个vs2015 并且保证已经升级至 update3及以上,下载链接 ...
- 使用Filter跟踪Asp.net MVC页面加载(转)
转载地址:http://www.cnblogs.com/JustRun1983/p/4027929.html 最近,客户一直反馈系统使用慢,有时候能够指出具体是哪个页面,有时候又只是笼统地反馈慢.这种 ...
- WPF数据爬取小工具-某宝推广位批量生成,及订单爬取 记:接单最痛一次的感悟
项目由来:上月闲来无事接到接到一个单子,自动登录 X宝平台,然后重定向到指定页面批量生成推广位信息:与此同时自动定时同步订单数据到需求提供方的Java服务. 当然期间遇到一个小小的问题就是界面样式的问 ...
- Discuz3.2 新用户插入数据库SQL
我们的网站要和Discuz整合到一起,有个新用户同步的需求,网络上很多的做法是用 UCenter的接口来做,反正最后都是插入SQL,笔者使用了直接操作数据库的方式,把操作的表和SQL整理了下,后面如果 ...
- error: Microsoft Visual C++ 14.0 is required.
缺少包的依赖!! 解决办法1. 安装 Microsoft visual c++ 14.0 https://964279924.ctfile.com/fs/1445568-239446865 或 htt ...
- 51Nod 部分题目 の 口胡&一句话题解
原文链接https://www.cnblogs.com/zhouzhendong/p/51Nod-One-Sentence.html 51Nod1404 先列出式子,然后搞成一个组合数.然后 luca ...
- BZOJ4811 [Ynoi2017]由乃的OJ 树链剖分
原文链接http://www.cnblogs.com/zhouzhendong/p/8085286.html 题目传送门 - BZOJ4811 题意概括 是BZOJ3668长在树上并加上修改和区间询问 ...
- Flume配置文件写法总结
一.agent 第一步是定义agent(代理)及agent下的sources.channels.sinks的简称,如下: a1.sources = r1 a1.sinks = k1 a1.channe ...