关于Ajax的学习

1、下列代码实现了对原生XHR对象的支持:

 1 function createXHR(){
 2    if(typeof XMLHttpRequest!="undefined"){
 3      return newXMLHttpRequest();
 4    }else if(typeof ActiveXObject!="undefined"){
 5         if(typeof arguments.callee.activeXString!="string"){
 6             var version=["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],i,len;
 7             for(i=0;len=versons.length;i<len;i++){
 8                 try{
 9                     new ActiveXObject(versons[i]);
10                     arguments.callee.activeXString=versons[i];
11                     break;
12                 }catch(ex){
13                 }
14             }
15         }
16         return new ActiveXObject(arguments.callee.activeXString);
17     } else{
18          throw new Error("No XHR object available");
19     }
20 }

首先检查原生的XMLHttpRequest()对象是否存在,存在则返回新实例。如果原生不存在,则检测ActiveX对象,如果这两种对象都不存在,抛出一个错误。

  

var xhr=createXHR();

xhr.open()    接受三个参数,要发送的请求类型;请求的url,和异步发送请求的布尔值;

要发送特定的请求:

  

xhr.open("get","example.txt",false);

  xhr.send(null);

send()方法接受一个参数为请求主体发送的数据。不需要通过请求主体发送数据,必须传入null

上述请求是同步的,JavaScript代码会等到服务器相应后继续执行,收到相应后,相应的数据会自动填充XHR对象的属性;为确保收到适当的相应,应检查状态代码;

  

if((xhr.status>=200&&xhr.status<300)||xhr.status==304){

    alert(xhr.responseText);

  else{

    alert("Request was not success:"+xhr.status);

  }

     }

发送异步请求时候,要检测XHR对象的readyState属性

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 not success:"+xhr.status);

      }

       }

  }

};

xhr.open("get","example.text",true);

send(null);

在接收响应之前可以通过xhr.abort()方法取消异步请求,终止请求后,应该对XHR对象解除引用。

2、GET请求用于向服务器查询某些信息,将查询字符串参数追加到URL的末尾,可以用下面的函数向url末尾添加查询字符串参数

function addURLParam(url,name,value){

url+=(url.indexof("?")==-1?"?":"&");

url+=encodeURLComponent(name)+"="+encodeURLComponent(value);

return url;

}

3、POST请求用于向服务器发送应该被保存的数据。

时间: 2024-10-26 01:54:55

关于Ajax的学习的相关文章

Ajax入门学习原始代码

<script type="text/javascript">        window.onload = function () {            //1.创建xmlhttprequest对象            var xhr = createXHR();            function createXHR() {//为了兼容新老IE的版本                var request;                if (typeof(X

AJAX异步学习总结(1)

AJAX异步学习总结(1) AJAX异步学习总结(1) ①:运用HTML和CSS来实现页面,表达信息: ②:运用XMLHttpRequest和服务器进行数据的异步交换: ③:运用JavaScript操作DOM,实现动态局部刷新: HTTP请求 HTTP是一个无状态的链接 一个完整的HTTP请求过程,7个步骤 建立TCP连接: WEB浏览器向WEB服务器发送请求命令: Web浏览器发送请求头信息: Web服务器应答: Web服务器发送应答头信息: Web服务器向浏览器发送数据: Web服务器关闭T

ajax 简单学习

客户端代码function login(type) { $.ajax({ type: "post", url: "logindo.aspx", data: { user: $("#name").val(),//对应<input type="text" id="name"/>的值 pwd:pwd ////对应<input type="password" id="

AJAX快速学习笔记

可关注我的个人微信公众号:卟野iiiiiiiya AJAX快速学习笔记: https://mp.weixin.qq.com/s?__biz=MzI0MDY0NzI3Mw==&tempkey=OTMwX2NOeUIrdzFEaThtMFBiUlJYdFhqcWViaHY1bFlQUTdmU1RrUnpkc1IzQmNfWENHVXFZb2ZLajhURlFwbzZoOF80RlA0THdQeGVYcDB2OENSdnBKcUNHdU9QRER0OWxkUE9YUGp0SU90WmwwWVl1SnJ

Ajax的学习笔记(一)

AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),ajax并不是一门单独的语言,而是一种技术,是指一种创建交互式网页应用的网页开发技术.局部刷新页面使用的就是这种技术,这样的好处是页面不需要刷新,服务器处理的数据大大减少,减轻服务器压力.但是学习这门技术必须要邮编JavaScript的基础.

20151211Jquery Ajax进阶学习笔记

四.JSON 和 JSONP 如果在同一个域下,$.ajax()方法只要设置 dataType 属性即可加载 JSON 文件.而在非 同域下,可以使用 JSONP,但也是有条件的. //$.ajax()加载 JSON 文件 $.ajax({ type:'POST', url:'test.json', dataType:'json', success:function(response,status,xhr){ alert(response[0].url); } }); 如果想跨域操作文件的话,我

AJAX(学习笔记一)

1:什么是AJAX? AJAX是一组英文单词的简写,这组英文单词是 :Asynchronous JavaScript and XML ,翻译成中文的意思是: 异步的JavaScript 和 XML.什么意思呢?简单点讲就是:通过HTML页面中的JavaScript方法能够不刷新整个页面的情况下实现和服务端进行交流返回对应的请求数据,而返回的数据常常是两种格式的,文本格式和XML格式的,但是文本格式比较简单使用XML格式的数据很容易替代掉,所以使用XML表示更加的贴切,现在常常返回JSON格式的数

AJAX之学习笔记(持续更新......)

以前的学习都是在Evernote上做的笔记,之前也在博客园注册过,但是一直没用,就荒废了.最近想既然是学技术的,用这个来记我的一些日常学习笔记是在好不过了. 总之加油吧~~~希望自己能早日摆脱新手这个称呼嘻嘻(*^__^*) 1.AJAX的定义 AJAX=Asynchronous JavaScript and XML(异步的JavaScript和XML)——此处应先了解HTML.XHTML.CSS.JavaScript和DOM结构. AJAX是一种新方法,不是新的编程语言,可以在不需要重新加载网

Ajax 技术学习

一.Ajax 基础 1.1 什么是 Ajax? 1.2 在哪里我们会用到 ajax 1.3 ajax 的工作原理 1.4 XMLHttpRequest 对象 1.4.1 XMLHttpRequest 常用方法 1.4.2 XMLHttpRequest 常用属性 二.让我们来试一试吧 2.1 简单的使用 ajax ,验证用户名是否合法 2.1.1 前端 demo (index.jsp) 2.1.2 JavaScript demo 2.1.3 2.1.4 后端 servlet 代码 2.2 运行截图

Jquery+Ajax+php学习笔记

昨天研究ajax,想作个登陆框,无刷新就把用户名密码提交给后台php程序,验证后发回. 几经琢磨 总算出来前台代码: <script src="./javascript/jquery-latest.pack.js" type="text/javascript"></script> //导入jQuery框架文件 要用jQuery必须做此步<script type="text/javascript">$(docum