ajax的简单使用——get&post的实现(2)

之前已经的博客有了一种简单实现ajax的方法,这里再补充另一种ajax的实现方法。

与之前不同的是,这里采用纯JavaScript的方法来实现ajax的get和post两种方法。
具体实现如下:

get
var xmlhttp;
        if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
        }
        else{// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function(){
        //you can do anything you want to edit your data
          if (xmlhttp.readyState==4 && xmlhttp.status==200){
              var data = JSON.parse(xmlhttp.responseText);
              var temp = "<h2>All Titles<h2>";
              for(var i = 0;i<data.length;i++){
                temp += `<p>Title:${data[i].title}</p>`;
              }
              $("#test").append(temp);
            }
        }
      xmlhttp.open("GET", "https://jsonplaceholder.typicode.com/posts", true);
      xmlhttp.send();
post
$("#test1").on('click', function(){
    var data = 
      {
        "userId": $("#name").val(),
        "id":  $("#password").val(),
        "title": "123",
        "body": "12"
      };
      var param = "asdfadfasdga";
    var xmlhttp;
    if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
    }
    else{// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function(){
      if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        alert("success!");
      }
    }
  xmlhttp.open("post", "https://httpbin.org/post", true);
  xmlhttp.send(JSON.stringify(data));//json is ok
  //xmlhttp.send(JSON.stringify(param));//string is ok
  });
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值