ajax请求过程
1.什么是ajax
AJAX=Asynchronous JavaScript and XML =====>异步的javascript和xml
AJAX是在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的艺术,是一种用于创建快速动态网页的技术。
XMLHttpRequest 是AJAX的基础,现代所有浏览器均支持XMLHttpRequest对象(IE5、IE6使用ActiveXObject)。
2.创建ajax实例
创建XMLHttpRequest对象的语法:
var httpObj=new XMLHttpRequest();
3.向服务器发送请求:使用XMLHttpRequest 对象的 open() 和 send() 方法:
httpObj.open(method,url,async);
httpObj.send();
send(string )将请求发送到服务器,string仅用于POST请求
- method:请求的类型;GET或POST
- URL:文件在服务器上的位置
- async:true(异步)false:(同步)默认是异步
为了避免get到的是缓存的结果,请向 URL 添加一个唯一的 ID:
httpObj.open("GET","demo_get.asp?t=" + Math.random(),true);
httpObj.send();
如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:
httpObj.open("POST","ajax_test.asp",true);
httpObj.setRequestHeader("Content-type","application/x-www-form-urlencoded");
httpObj.send("fname=Bill&lname=Gates");
setRequestHeader(header,value)向请求添加 HTTP 头。header: 规定头的名称 value: 规定头的值
当使用 async=true 时,请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数:
4.请求完毕之后,需要客户端处理:
onreadystatechange 事件
readyState 属性存有 XMLHttpRequest 的状态信息。每当 readyState 改变时,就会触发 onreadystatechange 事件。
onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。(0: 请求未初始化1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成,且响应已就绪)
status 200: "OK" 404: 未找到页面
当 readyState 等于 4 且状态为 200 时,表示响应已就绪
很多人不明白readyState这个ajax实例的请求状态和服务器请求结束后给ajax实例返回的status的区别,前者是ajax实例的请求过程的各个状态值,后者是服务器处理请求每一步返回给客户端的状态码
httpObj.onreadystatechange=function()
{
if (httpObj.readyState==4 && httpObj.status==200)
{
document.getElementById("ele").innerHTML=httpObj.responseText;
//如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
//responseText 获得字符串形式的响应数据。
//responseXML 获得 XML 形式的响应数据。
}
}
5.服务器响应 结合上篇的http过程
当请求在第三部send之后,
首先http是一个应用层的协议,在这个层的协议,只是一种通讯规范,也就是因为双方要进行通讯,大家要事先约定一个规范。
1.连接 当我们输入这样一个请求时,首先要建立一个socket连接,因为socket是通过ip和端口建立的,所以之前还有一个DNS解析过程,把www.mycompany.com变成ip,如果url里不包含端口号,则会使用该协议的默认端口号。
DNS的过程是这样的:首先我们知道我们本地的机器上在配置网络时都会填写DNS,这样本机就会把这个url发给这个配置的DNS服务器,如果能够找到相应的url则返回其ip,否则该DNS将继续将该解析请求发送给上级DNS,整个DNS可以看做是一个树状结构,该请求将一直发送到根直到得到结果。现在已经拥有了目标ip和端口号,这样我们就可以打开socket连接了。
2.请求 连接成功建立后,开始向web服务器发送请求,这个请求一般是GET或POST命令(POST用于FORM参数的传递)。GET命令的格式为: GET 路径/文件名 HTTP/1.0
文件名指出所访问的文件,HTTP/1.0指出Web浏览器使用的HTTP版本。现在可以发送GET命令:
GET /mydir/index.html HTTP/1.0,
3.应答 web服务器收到这个请求,进行处理。从它的文档空间中搜索子目录mydir的文件index.html。如果找到该文件,Web服务器把该文件内容传送给相应的Web浏览器。
为了告知浏览器,,Web服务器首先传送一些HTTP头信息,然后传送具体内容(即HTTP体信息),HTTP头信息和HTTP体信息之间用一个空行分开。
常用的HTTP头信息有:
① HTTP 1.0 200 OK 这是Web服务器应答的第一行,列出服务器正在运行的HTTP版本号和应答代码。代码"200 OK"表示请求完成。
② MIME_Version:1.0 它指示MIME类型的版本。
③ content_type:类型 这个头信息非常重要,它指示HTTP体信息的MIME类型。如:content_type:text/html指示传送的数据是HTML文档。
④ content_length:长度值 它指示HTTP体信息的长度(字节)。
4.关闭连接:当应答结束后,Web浏览器与Web服务器必须断开,以保证其它Web浏览器能够与Web服务器建立连接。
ajax请求过程的更多相关文章
- Ajax请求过程中显示“进度”的简单实现
Ajax在Web应用中使用得越来越频繁.在进行Ajax调用过程中一般都具有这样的做法:显示一个GIF图片动画表明后台正在工作,同时阻止用户操作本页面(比如Ajax请求通过某个按钮触发,用户不能频繁点击 ...
- 分析ajax请求过程以及请求方法
ajax 的全称是Asynchronous JavaScript and XML,其中,Asynchronous 是异步的意思,它有别于传统web开发中采用的同步的方式.据小编翻墙了解到,ajax很早 ...
- ajax请求过程中下载文件在火狐下的兼容问题
项目中碰到的问题,记录如下. 需求很简单,点击一个文件链接下载该文件,同时向后台发送请求.需求很常见,用户点击下载后通常要进行下载量的统计,统计的话可以利用 script标签 或者 img标签(图片p ...
- 统一处理jquery ajax请求过程中的异常错误信息的机制
当jQuery ajax向服务器发送请求,服务器发生异常,比如:400.403.404.500等异常,服务器将异常响应给客户端,此时的ajax可以获取异常信息并进行处理,但此时我们一般是跳转到与异常编 ...
- zepto源码研究 - ajax.js(请求过程中的各个事件分析)
简要:ajax请求具有能够触发各类事件的功能,包括:触发全局事件,请求发送前事件,请求开始事件,请求结束事件等等,贯穿整个ajax请求过程,这是非常有用的,我们可以利用这些事件来做一些非常有意思的事情 ...
- ajax 请求被终止 chrome查询发现请求状态status为canceled
检查页面的network执行中发现页面被刷新了url改变了导致请求在请求过程中被终止了. 检查代码发现在 submit方法中最后写了个 location.reload();方法 来重载页面 虽然是卸 ...
- 原生JS发送Ajax请求、JSONP
一.JS原生Ajax Ajax=异步Javascript+XML: ajax是一种数据请求的方式,不需要刷新整个页面.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. ajax的核心 ...
- ajax用beforeSend自定义请求过程中客户端事件,提高用户体验
本文为博主原创,未经允许不得转载: 在应用ajax的过程中,当我们再前台提交请求的时候,如果服务端响应事件比较长,就会导致需要等很长时间在前台才能接受到服务端返回的 响应结果,往往会导致用户重复点击按 ...
- 原生ajax的请求过程
原生ajax的请求过程 创建全平台兼容的XMLHttpRequest对象: function getXHR(){ var xhr = null; if(window.XMLHttpRequest) { ...
随机推荐
- [Phoenix] 六、MR在Ali-Phoenix上的使用
摘要: 在云HBASE上利用MR BULKLOAD入库PHOENIX表或通过MR构建PHOENIX索引表. 一.MR在Phoenix上的用途 利用MR对Phoenix表(可带有二级索引表)进行Bulk ...
- extjs中新建窗体时,给窗体添加背景图片不显示问题之一
1.在extjs中新建窗体时,给窗体添加背景图片不显示,例如下面的代码. 不显示的原因:因为设置了 layout: 'fit', Ext.create('Ext.Window', { title: ...
- react遇到的各种坑
标签里用到<label for>的,for 要写成htmlFor 标签里的class要写成className 组件首字母一定要大写 单标签最后一定要闭合 如果html里要空格转义, 注意不 ...
- java的一个简单死锁的例子
package com.deadlock; /* * 演示死锁:(由毕向东视频所得) * 一种解释:Thread—0拿到lock1锁,Thread—1拿到lock2锁,Thread—0想要lock2锁 ...
- STM32 ~ JTAG、SWD和串口下载的问题
最近有一个项目用到STM32,为了使PCB布线方便一些所以改了一些引脚,占用了JTAG接口的PA15和PB3,所以要禁用一下JTAG,下载采用SWD模式.这样在实际操作中做出一些总结(方法网上都有.这 ...
- linux3 源代码安装
源代码安装: 通过yum就不会有依赖关系(安装mysql是安装mysqlServer).Rpm更新的时候,如果没有安装软件就回去安装. 应用程序和系统命令会放在不同的目录中(bin,sbin,usr/ ...
- Jpa生成mysql注释,添加ODBC数据源导入数据到EA
通过Jpa 注解生成表注释 实体类中使用如下注解,生成表字段注释: @Column(name = "userid", columnDefinition = "varcha ...
- WebDriver API——javascript的相关操作
有些时候webdriver是没法操作元素或浏览器的,这时候我们可以通过javascript来进行相关的操作,昨天在群里一个朋友定位一个显示框,总是无法定位点击,或者是点击无效,这个时候就可以用java ...
- 分布式session之redis解决方案实现
一.首先Session Session 是客户端与服务器通讯会话技术, 比如浏览器登陆.记录整个浏览会话信息.session存放在服务器,关闭浏览器不会失效. Session实现原理 客户对向服务器端 ...
- codeforces 701C C. They Are Everywhere(尺取法)
题目链接: C. They Are Everywhere time limit per test 2 seconds memory limit per test 256 megabytes inp ...