前端常用的几种请求方式(Ajax,fetch,xmlHttpRequest)

XMLHttpRequest

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange=function()

   {

          if (xmlhttp.readyState==4 && xmlhttp.status==200) {

                 document.getElementById("myDiv").innerHTML=xmlhttp.responseText; 

            }

     }

xmlhttp.open("GET","test1.txt",true);

xmlhttp.send();

以上为一个请求的基本形式

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

XMLHttpRequest 对象的三个重要的属性

此外，如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据

xmlhttp.open("POST","ajax_test.asp",true);

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xmlhttp.send("fname=Bill&lname=Gates");

jQuery ajax

jQuery 的 ajax 是对 XMLHttpRequest的封装，它的用法一般有这几种：

1 ）$.ajax

$.ajax({

        url:URL,

        type:'GET',

        dataType:"json", 

        success : function(data) { }

        error :function(er){ }

});

2 ) $.get ()

$(selector).get(url,data,success(response,status,xhr),dataType)

$.get()参数详解

3 ) $.post()

jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)

$.post()参数详解

最后，目前前端用的最多的Fetch

Fetch API

fetch(URL).then(function(response){

    return response.json();

}).then(function(json){

insertPhotos(json);

});

ps:

POST和GET的选择与区别

by.潘小闲