Ajax原生实现及相关知识讲解
来源:互联网 发布:linux 显示行号的命令 编辑:程序博客网 时间:2024/05/16 17:51
最近在系统的学习JavaScript基础知识,本文讲解一下关于ajax的实现。
首先上一个原生实现的代码:
// 创建兼容主要浏览器的XHR对象的方法function createXHR(){ if(typeof XMLHttpRequest != "undefined"){ return new XMLHttpRequest(); }else if(typeof ActiveXObject != "undefined"){ var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"], i, len; for(i = 0, len = versions.length; i<len; i++){ try{ new ActiveXObject(versions[i]); arguments.callee.activeXString = versions[i]; break; } catch(ex){} } return new ActiveXObject(arguments.callee.activeXString); }else{ throw new Error("No XHR object available"); }}// 创建XHR对象var xhr = createXHR();xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){ alert(xhr.responseText); }else{ alert("Request was unsuccessful:" + xhr.status); } }};xhr.open("get","example.php",true); // 启动请求,以备发送xhr.send(null); // 发送请求
1、关于open()
接受三个参数,第一个为请求的类型,主要有get、post等,后面详细讲解;第二个参数为请求的URL;第三个参数为是否异步,true表示异步。
2、关于send()
可接受一个参数,为向请求体发送的数据。若不需要发送数据,写null(为了浏览器兼容性)。
3、关于readyState
异步请求时,需要查看请求响应的状态来判断下一步的操作。此时,readyState派上用场。
它有五个值:
- 0:未初始化。尚未调用open()方法;
- 1:启动。已经调用open()方法,但还没调用send()方法;
- 2:发送。已经调用send()方法,但尚未接收到响应;
- 3:接收。已经接收到部分响应数据;
- 4:完成。已经接收到全部响应数据,而且已经可以在客户端使用。
4、关于responseText,responseXML
这两个属性值就是上面readyState为4时的响应数据。根据响应数据的格式不同,两个属性值不同。responseText表示文本。另一个表示XML DOM文档。
5、关于status
该属性表示http状态码。
具体一些常见的状态码信息可查看另一篇文章HTTP状态码
6、HTTP头部信息
7、HTTP协议请求类型
HTTP共有8种请求类型。具体为:
- OPTIONS:返回服务器针对特定资源所支持的HTTP请求方法。也可以利用向Web服务器发送’*’的请求来测试服务器的功能性。
- HEAD:向服务器索要与GET请求相一致的响应,只不过响应体将不会被返回。这一方法可以在不必传输整个响应内容的情况下,就可以获取包含在响应消息头中的元信息。
- GET:向特定的资源发出请求。
- POST:向指定资源提交数据进行处理请求(例如提交表单或者上传文件)。数据被包含在请求体中。POST请求可能会导致新的资源的创建和/或已有资源的修改。
- PUT:向指定资源位置上传其最新内容。
- DELETE:请求服务器删除Request-URI所标识的资源。
- TRACE:回显服务器收到的请求,主要用于测试或诊断。
- CONNECT:HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。
其中最常用的是GET、POST请求。
get请求主要用于向服务器查询某些信息。它的字符串参数可以追加到URL的末尾。使用get请求常犯的错误就是查询的字符串格式有问题。查询字符串中每个参数的名称和值都必须使用encodeURIComponent()进行编码。
post请求主要用于向服务器发送应该被保存的数据。可传输的数据量比get大。
阅读全文
0 0
- Ajax原生实现及相关知识讲解
- 不用JQuery,原生Javascript实现Ajax功能及相关知识点
- 原生js实现Ajax实例讲解
- 原生js实现Ajax实例讲解
- 原生AJAX入门讲解
- 原生Ajax讲解
- 原生Ajax讲解
- Ajax原理及用原生js实现Ajax应用
- JavaMail相关知识讲解
- 前端知识-原生Ajax理解
- 原生JavaScript实现AJAX
- 原生js实现Ajax
- 原生js实现ajax
- 原生JS实现Ajax
- 原生js实现ajax
- 原生javaScript实现Ajax
- JavaScript实现原生ajax
- 原生js实现Ajax
- Java网络详解
- 009_JavaScript中的Boolean变量
- 饿了么项目---4、移动端查看项目及border 1像素问题
- hdu 2955 Robberies 01背包
- 广义表
- Ajax原生实现及相关知识讲解
- 趣味数学--用1到9这九个数组成一个四位数乘以一位数等于四位数的等式,每个数只能用一次
- OpenGL无法打开文件“freeglut.lib”错误的解决办法
- heartbeat+nginx
- Codeforces 463D Gargari and Permutations(BFS)
- CodeForces
- java中静态块、main方法、构造块、构造方法的执行顺序复习
- github配置pc与远程ssh
- JUnit4 源码阅读(一)