zx66
/
nc.963.cn


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
							<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dev: Network</title>
  <link href="../example/lib/weui.min.css" rel="stylesheet"/>
  <link href="../example/lib/demo.css" rel="stylesheet"/>

  <script src="../dist/vconsole.min.js"></script>
</head>
<body ontouchstart>
  <div class="page">
    <a onclick="getAjax()" href="javascript:;" class="weui_btn weui_btn_default">getAjax</a>
    <a onclick="postAjax()" href="javascript:;" class="weui_btn weui_btn_default">postAjax</a>
    <a onclick="getFetch()" href="javascript:;" class="weui_btn weui_btn_default">getFetch</a>
    <a onclick="getFetchSimple()" href="javascript:;" class="weui_btn weui_btn_default">getFetch(simple)</a>
    <a onclick="postFetch()" href="javascript:;" class="weui_btn weui_btn_default">postFetch</a>
    <a onclick="postFetchByRequest()" href="javascript:;" class="weui_btn weui_btn_default">postFetchByRequest</a>
  </div>
</body>
</html>

<script>

window.vConsole = new window.VConsole();


function postAjax() {

  console.info('postAjax() Start, response should be logged after End');

  const xhr = new XMLHttpRequest();

  xhr.open('POST', './data/success.json');

  xhr.send({

    foo: 'bar',

    id: Math.random(),

    type: 'xhr',

    '<xss0>': '<xss1> XSS Attack!'

  });

  xhr.onload = () => {

    console.log('postAjax Response:', JSON.parse(xhr.response));

  };

  xhr.onerror = () => {

    console.log('postAjax Error');

  };

  console.info('postAjax() End');

}


function getAjax() {

  console.info('getAjax() Start, response should be logged after End');

  const url = './data/success.json?type=xhr&id=' + Math.random() + '&<xss0>';

  const xhr = new XMLHttpRequest();

  xhr.open('GET', url);

  xhr.setRequestHeader('custom-header', 'foobar');

  xhr.send();

  xhr.onload = () => {

    console.log('getAjax Response:', JSON.parse(xhr.response));

  };

  xhr.onerror = () => {

    console.log('getAjax Error');

  };

  console.info('getAjax() End');

}


function getFetch() {

  console.info('getFetch() Start, response should be logged after End');

  window.fetch('./data/success.json?type=fetch&id=' + Math.random(), {

    method: 'GET',

    headers: {

      'custom-header': 'foobar',

      'content-type': 'application/json'

    },

  }).then((data) => {

    return data.json();

  }).then((data) => {

    console.log('getFetch Response:', data);

  });

  console.info('getFetch() End');

}


function getFetchSimple() {

  console.info('getFetchSimple() Start, response should be logged after End');

  window.fetch('./data/success.json?type=fetch&id=' + Math.random()).then((data) => {

    return data.json();

  }).then((data) => {

    console.log('getFetchSimple Response:', data);

  });

  console.info('getFetchSimple() End');

}


function postFetch() {

  console.info('postFetch() Start, response should be logged after End');

  window.fetch('./data/success.json', {

    method: 'POST',

    body: { foo: 'bar', id: Math.random(), type: 'fetch' },

    // body: new Blob([new ArrayBuffer(233)], { type: 'image/png' }),

    headers: {

      'custom-header': 'foobar',

      // 'content-type': 'application/json'

      // 'content-type': 'application/x-www-form-urlencoded'

      'content-type': 'multipart/form-data',

      'xss': '<xss1> XSS Attack!'

    },

  }).then((data) => {

    return data.json();

  }).then((data) => {

    console.log('postFetch Response:', data);

  }).catch((error) => {

    console.error('postFetch Error:', error);

  });

  console.info('postFetch() End');

}


function postFetchByRequest() {

  console.info('postFetchByRequest() Start, response should be logged after End');

  const headers = new Headers();

  headers.append('custom-header', 'foobar');

  // headers.append('content-type', 'application/json');

  headers.append('content-type', 'application/x-www-form-urlencoded');

  const req = new Request('./data/success.json?type=fetch&id=' + Math.random(), {

    method: 'POST',

    body: { foo: 'bar', id: Math.random() },

    // body: new Blob([new ArrayBuffer(233)], { type: 'image/png' }),

    headers: headers,

  });

  window.fetch(req).then((data) => {

    return data.json();

  }).then((data) => {

    console.log('postFetchByRequest Response:', data);

  }).catch((error) => {

    console.error('postFetchByRequest Error:', error);

  });

  console.info('postFetchByRequest() End');

}


</script>