ajax

作者: 洋葱大大 | 来源:发表于2017-07-07 20:28 被阅读0次
  1. 实例化XMLHttpRequest对象。
var xhr=null;
 try {
       xhr=new XMLHttpRequest();
  }catch (e){
        //ie6及其以下的版本
       xhr=new ActiveXObject('Microsoft.XMLHTTP');
       }
  1. 在使用xhr对象时,要使用的第一个方法是open().
xhr.open('get','1.example.txt',true);

这里接收三个参数,要发送请求的类型(get,post),请求的URL和是否异步(true:异步,false:同步)。
注意:这里并不会真正发送请求,而是启动一个请求以备发送

  1. 发送请求,调用send()方法。
xhr.send(null)

GET请求没有主体,所以应该传递null或者省略这个参数。POST请求通常拥有主体,同时它应该匹配使用setRequestHeader()指定的“Content-Type”头。

  1. get请求。
    get请求通常用于向服务器查询某些信息,必要时,可以将查询字符串参数追加到URL的末尾,但参数必须经过正确的编码。
function addURLParam(url,data) {
        url +='?';
        var arr = [];
        for(var name in data) {
            //   encodeURIComponent() :用于对 URI 中的某一部分进行编码
            arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
        }
        return url+arr.join('&');
    }

这里的data格式是json。
2.post请求。
对于请求,通常像服务器发送应该被保存的数据,应该把数据作为请求的主题提交,它不是以地址形式传参,而是在send()中传参。

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); 
      // 传输数据  
      xhr.send(data);  

4.监听事件,只要 readyState 的值变化,就会调用 readystatechange 事件.。

xhr.onreadystatechange = function() {   
              //readyState值为4,说明所有数据已就绪 
        if ( xhr.readyState == 4 ) {
            if ( xhr.status == 200 && xhr.status<300 ) {
                alert(xhr.responseText)
            } else {
                alert('出错了,Err:' + xhr.status);
            }
        }   
    }

相关文章

  • AJAX

    主要内容: ajax 是什么、原生ajax 写法和jQuery ajax写法。 AJAX 是什么 ajax,即As...

  • JavaScript进阶知识点--AJAX及JSON

    AJAX 关于 AJAX 什么是 AJAX AJAX 的全称是 Asynchronous JavaScript a...

  • HTML5权威指南 | 第五部分 高级功能

    三十二、使用AJAX(上) Ajax起步: 使用Ajax事件: Ajax请求的错误处理: 中止Ajax请求: 三十...

  • ajax学习笔记

    Ajax学习笔记 Ajax简介 1. Ajax是什么? Ajax : Asynochronous javascri...

  • AJAX

    一、简介 AJAX菜鸟教程 什么是 AJAX ? AJAX = 异步 JavaScript 和 XML。 AJAX...

  • js之AJAX复习

    异步交互和同步交互 什么是Ajax? Ajax的工作原理。 Ajax包含的技术: Ajax的缺陷: Ajax的核心...

  • 复习jQuery - ajax

    jQuery ajax - ajax() 方法 $.ajax({ url:'oo.php', ...

  • jQuery中Ajax请求的使用和四个步骤示例

    ajax() 方法用于执行 AJAX(异步 HTTP)请求,所有的 jQuery AJAX 方法都使用 ajax(...

  • ajax

    1、什么是ajax? 2、ajax的原理 3、ajax的核心对象 4、ajax的优点: ajax的缺点: 被jqu...

  • ajax

    Ajax 1 - 请求纯文本 Ajax 2 - 请求JSON数据 Ajax 3 - 请求Github接口 Ajax...

网友评论

      本文标题:ajax

      本文链接:https://www.haomeiwen.com/subject/pblrhxtx.html