原生JavaScript封装ajax,可以直接使用

什么是Ajax?(前后端数据交互)
Asynchronous JavaScript and XML(异步JavaScript和XML)
     
  1. 节省用户操作时间,提高用户体验,减少数据请求
  2. 传输、获取数据

ajax流程:
oBtn.οnclick=function(){
    //第一步    ‘打开浏览器’    创建ajax对象
    /*
     var xmlhttp;
     第一种方式
    if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
         //ie6下不存在XMLHttpRequest,所以不能用XMLHttpRequest作判断条件  应该判断window下有没有XMLHttpRequest属性,如果没有只会返回undefined,不会报错
          xmlhttp=new XMLHttpRequest();
      }
    else{// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
      第二种方式
      try{
          xmlhttp=new XMLHttpRequest();
      }catch(e){
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }

     * */
    var xhr=new XMLHttpRequest();

    //第二步    ‘在地址栏输入地址’
    /*
     open()
     参数
         1.打开方式
         2.地址
         3.是否异步
               异步:非阻塞
               同步:阻塞
     * */
    xhr.open('get','1.txt',true);

    //第三步    ‘提交’    发送请求
    xhr.send();

    //第四步    ‘等待服务器返回结果’

    /*
     * 请求状态监控
            on readystate change事件
            readyState属性:请求状态
                0    (初始化)还没有调用open()方法
                1    (载入)已调用send()方法,正在发送请求
                2    (载入完成)send()方法完成,已收到全部响应内容
                3    (解析)正在解析响应内容
                4    (完成)响应内容解析完成,可以在客户端调用了

            status属性:服务器(请求资源)的状态      http状态码
            返回的内容
            responseText:返回以文本形式存放的内容
            responseXML:返回XML形式的内容
     *
     *
     * readyState:ajax工作状态
       responseText:ajax请求返回的内容就被存放到这个属性下面
     * */
    xhr.onreadystatechange=function(){
        if (xhr.readyState==4) {

            //容错处理
            if(xhr.status==200){
                alert(xhr.responseText);
            }else{
                alert('出错了,Err:'+xhr.status);
            }

        }
    }
}
form表单:
     action:数据提交地址,默认是当前页面
     method:数据提交方式,默认是get方式
          1.get
                把数据名称和数据值用=连接,如果有多个的话,那么他会把多个数据组合用&进                 行连接,然后把数据放到url?后面传到指定页面 url长度限制的原因,我们不要通过get方式传递过多的数据
            2.post
                理论上无限制
      enctype:提交的数据格式 ,默认是:application/x-www-form-unlencoded

   application/x-www-form-urlencoded


WEB前端学习交流群21 598399936


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值