Ajax实现异步请求
基本步骤:创建XMLHttpRequest对象-->配置发送参数-->执行发送-->处理响应
ajax 通俗讲有四个步骤
1.创建Ajax对象
2.链接到服务器
3.发送请求
4.接受返回值
1.创建对象
var xhr = null;
if(window.XMLHttpRequest){
标准浏览器
xhr = new XMLHttpRequest();
}else{
非标准浏览器IE6/7/8
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
对于前面要在if中加window判断是因为,浏览器会对未定义值的变量读取时报错 ,而对于window.variable不会报错,而是报undefined.
2.连接服务器
首先理解同步与异步
同步:事情一件一件来
异步:多件事情一起做
而ajax就是为了异步而生的,例如用户请求表单后,提交到服务器的过程,用户不用等待,可以干别的事情。。。。。。
var type = 'get';
var myurl = './data.php';
var async = false;//第三个参数默认值就是true,表示异步;false表示同步
xhr.open(type,myurl,async);
3发送请求
//发送请求
4.接受请求
主要是判断浏览器和服务器的交互进度和结果
xhr.onreadystatechange=function(){
//oAjax.readyState浏览器和服务器的交互情况
if(oAjax.readyState == 4)//读取完成
{
if(oAjax.status==200)//http状态码,用来判断是否成功接受并返回文件
{
alert(oAjax.status+" Success" +oAjax.responseText);//读取响应文件里面的TEXT
}else{
alert(oAjax.status+" NotFound");
}
}
};
A、处理响应中的status (xhr.status == 200 ):
ajax清除缓存:
//将文件名设置随系统时间改变而改变,这样可以避免浏览器缓存旧数据
oAjax.open('GET','./a.txt?t='+new Date().getTime(),true);
B、XMLHttpRequest取得响应:
(1)responseText:获得字符串形式的响应数据
(2)responseXML:获得xml形式的响应数据
(3)status和statusText:以数字和文本形式返回Http转态码
(4)getAllResponseHeader():获得所以得响应报头
(5)getResponseHeader():查询响应中的某个字段的值
(6)readState属性
"0"请求未初始化,open还未调用
"1":服务器连接已经建立,open已调用
"2":请求已接收,也就是接收到头信息了
"3":请求处理中,也就是接收到响应主体了
"4":请求已经完成,且响应就绪,响应完成了
C、注意事项:
D、阻止表单提交的几种方式:
E、Ajax-get提交:
2.配置发送函数
encodeURI作用对get参数进行编码处理,防止乱码
var param = encodeURI('?username='+uname+'&password='+pw);
xhr.open('get','./data.php'+param);
3.发送
xhr.send(null);
F、Ajax-post提交:
2.配置发送函数
xhr.open('post','./33data.php');
//设置请求头信息(对于post提交必须设置请求头)
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencode');
3.发送
var param = 'username='+uname+'&password='+pw;
xhr.send(param);
G、post和get的区别:
get | post |
2.配置发送函数
encodeURI作用对get参数进行编码处理,防止乱码
var param = encodeURI('?username='+uname+'&password='+pw);
xhr.open('get','./data.php'+param);
3.发送
xhr.send(null);
|
2.配置发送函数
xhr.open('post','./33data.php');
设置请求头信息(对于post提交必须设置请求头)
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
3.发送
var param = 'username='+uname+'&password='+pw;
xhr.send(param);
|
1、Aja的get提交数据是通过url传递参数,并且需要对参数进行编码处理
2、xhr.send();方法参数固定为null
|
1、Ajax的post提交方式通过xhr.send();
函数传递的参数发送数据,而不是通过url传递数据
2、post提交方式必须设置请求头( xhr.setRequestHeader('Content-Type','application/x-www-form-urlencode'); )
3、post提交的数据不需要进行编码处理
|
H、HTTP请求:是一种规则,无状态,无记忆:
HTTP请求过程
(1)建立TCP连接
(2)web浏览器向web服务器发送请求指令
(3)web浏览器发送请求头信息
(4)web服务器应答
(5)web服务器发送应答头信息
(6)web服务器向浏览器发送数据
(7)web服务器关闭TCP连接
I、HTTP请求的4个·组成部分:
a、HTTP请求方法或者动作(GET/POST)
b、正在请求的URL
c、请求头,包含客户环境信息、身份信息等
d、请求体(正文),包含客户提交的查询字符串信息、表单信息
J、POST和GET方法:
GET:(1)用于信息获取
(2)使用URL传递参数
(3)String<=2000个字符左右
POST:(1)用于修改服务器上的资源
(2)String<=无穷大
K、一个HTTP响应由三个部分组成:
a、一个数字和文字组成的转态码。作用:显示请求是否成功
b、响应头,包含服务器类型、日期、内容类型、长度等
c、响应体,即响应正文,字符串、HTML等
L、HTTP状态码由3个数字构成,其中首位数字定义了状态码的类型:
1^^:信息类,表示收到web请求,正在进行处理中
2^^:成功,表示用户请求被正确接收、理解和处理,如200
3^^:重定向,表示请求未成功,客户必须采取动作
4^^:客户端错误,客户提交的信息有误,如400
found:意味着请求中所引用的文档不存在
5^^:服务器错误(最难处理的问题),表示服务器不能完成请求处理,如500
Ajax实现异步请求的更多相关文章
- 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求
转http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/ 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 ...
- MVC的Ajax的异步请求
MVC的Ajax的异步请求 在这里小写一下MVC的异步请求的一点小总结. 个人认为是有两种的,一种就是跟webform一样的,依旧是使用jQuery的$.get()方法,只是请求地址不同,webfor ...
- ajax 实现异步请求
ajax实现异步请求: function onclicks() { $.ajax( { url:'../hhh/columnSearch.do',// 跳转到 action // data: {tab ...
- AJAX的来龙去脉(由来)-如何被封装出来的--ajax发送异步请求(四步操作)
<黑马程序员_超全面的JavaWeb视频教程vedio\JavaWeb视频教程_day23_ajax> \JavaWeb视频教程_day23_ajax\day23ajax_avi\14.打 ...
- AJAX发送异步请求教程详解
AJAX 一.AJAX简介 什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可 ...
- ajax的异步请求小结
如何判断是使用json还是jsp的数据传输: json字符串可以使用js,jquery,ajax,java这几种技术,页面为jsp页面,json数据为java后台传递来. 1.同步请求可以从因特网请求 ...
- JQ+AJAX 发送异步请求
1. load() ; 作用:通过ajax 请求从服务器加载数据,并添加到符合要求的节点上 用法:$node.load(请求地址,请求参数) 请求参数写法: --"username=admi ...
- ajax json 异步请求
function ajaxTest(){ if (true) { $.ajaxSettings.async = false; var dataJson; $.getJSON("/univer ...
- AJax的异步请求
AJax的处理过程 1、传统的Web请求过程: 一般的 Web 应用程序中,用户填写表单字段并单击 Submit 按钮.然后整个表单发送到服务器,服务器将它转发给处理表单的脚本(通常是 PHP 或 J ...
- ajax发送异步请求
一:得到XMLHttpRequest对象 ajax其实只需要学习XMLHttpRequest一个对象 大多数浏览器都支持: var xmlHttp = new XMLHttprequest(); IE ...
随机推荐
- 微信小程序怎么获取page/index/main后面的参数
请求例子:page/index/main?id=123,如何获取123? mpvue框架在onLoad(options)函数里面获取options.id即可. 用的框架不同,onLoad的函数不同.原 ...
- 解决Linux系统下面javamelody图片中文乱码问题
从windows系统中,copy了C:\Windows\Fonts\msyh.ttc和msyhbd.ttc 2个文件到 服务器的%JAVA_HOME%\jre\lib\fonts\fallback 目 ...
- kotlin基础 尾递归
尾调用的重要性在于它可以不在调用栈上面添加一个新的堆栈帧——而是更新它,如同迭代一般. 尾递归因而具有两个特征: 调用自身函数(Self-called): 计算仅占用常量栈空间(Stack Space ...
- PhantomJS笔记,Node.js集成PhantomJS
PhantomJS笔记,Node.js集成PhantomJS 转 https://www.linchaoqun.com/html/cms/content.jsp?menu=index&id=1 ...
- android 8.1 wifi提示"已连接 但无法访问互联网"的解决办法
主要是GFW的问题 adb shell以下命令解决 settings put settings put settings put settings put global captive_portal_ ...
- [错误解决] Libreoffice转换不成功,直接不做任何操作
问题描述: Libreoffice在版本5.3.0之前都存在这个问题.现象是:当你运行其中一个LibreOffice的时候,再运行另外一个Libreoffice转换时,将不做任何操作. 解决方案: 如 ...
- 从原生Android 跳转到hbuilder项目
原文地址:https://blog.csdn.net/pentablet/article/details/80277157 前段时间做项目,需要把别人做的hbuilder项目,添加到自己的app中,找 ...
- Java并发编程核心概念一览
作者博客地址 https://muggle.javaboy.org. 并行相关概念 同步和异步 同步和异步通常来形容一次方法的调用.同步方法一旦开始,调用者必须等到方法结束才能执行后续动作:异步方法则 ...
- [ERROR ]Failed to execute goal org.codehaus.mojo:flatten-maven-plugin:1.1.0:flatten (flatten) on project
今天在启动项目的时候,莫名的Maven install命令的时候出现错误 错误提示:Failed to execute goal org.codehaus.mojo:flatten-maven-plu ...
- find和grep的使用
1.find命令的使用 在Linux中可以使用find命令在指定的目录下查找文件.任何位于参数之前的字符串都将被视为欲查找的目录名,当使用该命令时,不设置任何参数,则find命令将在当前目录下查找子目 ...