做商城网站会不会被攻击/免费做推广的网站
之前一直用axios,在做一个小型实例的时候回过头发现,ajax忘得差不多了,所以开始写这篇笔记
Ajax Post:
function submitImg() {// 1.获取用户数据var data = document.getElementById('fileImg').value;// 2. 让异步对象发送post请求// 2.1 创建异步对象var xhr = new XMLHttpRequest();// 2.2 设置请求行 open(请求方式,请求url)// 2.post请求不需要拼接参数xhr.open("post", "http://127.0.0.1:5000/upload");// 2.3 设置请求头:setRequestHeader()// 2.post需要设置请求头:Content-Type:application/x-www-form-urlencodedxhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//.如果没有设置,参数无法正确的传递到服务器(本质上说,如果没有参数,也不一定需要设置,不会影响请求的发送)// 2.4 设置请求体 send()// 2.post的参数在这个函数中设置(如果有参数)xhr.send("file" + data);// 3.让异步对象接收服务器的响应数据// 一个成功的响应有两个条件:1.服务器成功响应了 2.异步对象的响应状态为4(数据解析完毕可以使用了)// 当异步对象的响应状态发生改变的时候,会触发一个事件:onreadystatechangexhr.onreadystatechange = function() {// 判断服务器是否响应 判断异步对象的响应状态if (xhr.status == 200 && xhr.readyState == 4) {// document.querySelector(".showmsg").innerHTML = xhr.responseText;console.log(xhr.responseText)}}
}
Ajax Get:
function handleGet (){// 1.获取用户数据var name = this.value;// 2,让异步对象发送请求// 2.1 创建异步对象var xhr = new XMLHttpRequest();// 2.2 设置 请求行 open(请求方式,请求url):// get请求如果有参数就需要在url后面拼接参数,xhr.open("get","validate.php?username="+name);// 2.3 设置 请求头 setRequestHeader('key':'value')// get方式不需要设置请求头// 2.4 设置 请求体:发送请求 send(参数:key=value&key=value)// 对于 get请求不需要在这个位置来传递参数xhr.send(null);// 响应报文:// 报文行:响应状态码 响应状态信息 200 ok// 报文头:服务器返回给客户端的一些额外信息// 报文体:服务器返回给客户端的数据 responseText:普通字符串 responseXML:符合xml格式的字符串// xhr.status:可以获取当前服务器的响应状态 200 》成功console.log(xhr.status);// 一个真正成功的响应应该两个方面:1.服务器成功响应 2.数据已经回到客户端并且可以使用了// 监听异步对象的响应状态 readystate// 0:创建了异步对象,但是还没有真正的去发送请求// 1.调用了send方法,正在发送请求// 2.send方法执行完毕了,已经收到服务器的响应内容--原始内容,还不可以使用// 3.正在解析数据// 4.响应内容解析完毕,可以使用了xhr.onreadystatechange = function(){//等待浏览器返回成功并且解析完毕if(xhr.status == 200 && xhr.readyState == 4){console.log(xhr.responseText);console.log("-----------");document.querySelector(".showmsg").innerHTML = xhr.responseText;;}}
};
web小白,望大佬指点
推荐:https://blog.csdn.net/weixin_45520598/article/details/100062176?ops_request_misc=&request_id=&biz_id=102&utm_term=ajax%E4%BD%BF%E7%94%A8&utm_medium=distribute.pc_search_result.none-task-blog-2allsobaiduweb~default-1-100062176.first_rank_v2_pc_rank_v29