526互联

ajax-js

发布时间 2023-04-20 09:28:08作者: 挖洞404

1、介绍

ajax，asynchronous javascript and xml异步的js和xml。不重新加载整个页面的情况下，与服务器交互数据并更新部分页面。

  • 优点：交互友好，节约资源，不需要插件直接使用。
  • 分为同步和异步
  • 目前主要是json格式，替代xml
  • 可以多种请求方法
  • 可以设置请求头部，以及处理响应状态码、响应头部和响应体部
  • 使用：原生js、jquery、axios等

2、js使用过程

（1）创建XMLHttpRequest对象

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。IE5 和 IE6 使用 ActiveXObject。

var xmlhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

（2）设置请求并发送

核心是open方法和send方法。

open(method,url,async)
  • method：表示请求类型，GET或POST
  • url：文件或接口在服务器的位置，一般会添加随机数请求，避免缓存
  • async：true表示异步，即发送请求后页面可以进行其他操作。false表示同步，发送请求后页面需要等待返回再进行其他操作。
send()
  • 默认不需要参数
  • 如果是post方法，可以携带文本作为体部数据
setRequestHeader(header, value)
  • header：规定头部名称
  • value：规定头部字段的值
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true);
xmlhttp.send();

xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

（3）响应内容

responseText属性：获得字符串形式的响应数据，如果要解析json响应，先通过该属性获取文本，然后转换

responseXML属性：获得xml形式的响应数据

（4）响应过程

onreadystatechange：函数，每当readyState属性改变时调用

readyState：存储xmlhttp的状态

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成，且响应已就绪

status：响应状态码，数值形式

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

3、回调函数

回调函数是一种以参数形式传递给另一个函数的函数。

如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。

该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务

var xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
  {// IE7+, Firefox, Chrome, Opera, Safari 代码
  xmlhttp=new XMLHttpRequest();
  }
else
  {// IE6, IE5 代码
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()
{
	loadXMLDoc("/try/ajax/ajax_info.txt",function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
	});
}

4、js的ajax请求报文分析

html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
function fun(){
var xmlhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("POST","http://120.48.75.111/try/ajax/demo_post2.php?ab=<>章'\"",false);
//xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry'\"<>张&lname=Ford");
xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
       alert(xmlhttp.responseText);
    }
}
}
</script>
<button onclick=fun()>点击</button>
</body>
</html>

请求报文：

POST /try/ajax/demo_post2.php?ab=%3C%3E%E7%AB%A0%27%22 HTTP/1.1
Accept: */*
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9
Content-Length: 29
Content-Type: text/plain;charset=UTF-8
Host: 120.48.75.111
Origin: http://120.48.75.111
Proxy-Connection: keep-alive
Referer: http://120.48.75.111/wordpress/abc.html
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.5249.62 Safari/537.36

fname=Henry'"<>张&lname=Ford
  • 没有XMLHttpRequest头部字段
  • 后续测试，改变sync不影响请求头部
  • 默认的话，accpt接收任意类型
  • 默认的话，会有referer和origin字段
  • 默认的话，Content-Type为text/plain;charset=UTF-8
  • 后续测试，ajax-js默认对url中的参数会进行url编码，而对请求体部数据不会进行编码，需要注意测试过程中js编码
  • 某些情况会手动设置Content-Type为application/x-www-form-urlencoded，此时不影响url中编码，而请求体部并不会自动编码，而需要手动编码赋值