js中怎么写ajax

大前端成长进阶课程：进入学习

在JavaScript中使用ajax有两个作用：

1.让js去读服务器上面的数据.

2.无刷新的情况下读取服务器上面的数据,例如:验证账号和密码是否正确等.

对于网络请求我们知道有Get 和Post两种，它们之间的区别是什么呢？

get方式:常见的表单提交方式:将值在url后面提交;?名字=值&名字=值格.

提交表单例子:

<form  action="www.baidu.com " method="get" (默认是get方式)>
姓名:<input type="text" name="userName"></br>
密码:<input type="password" name="password">
<input type="submit" value="提交">
</from>

区别:

1.get方式是通过网址进行传递数据的,post是通过http中Content进行传递的.

2.get容量小,不适合传递大数据,(一般4k-10k),post方式容量相对大很多,一般服务器可以达到2G容量.

3.对于太大的文件,就不会走post,走控件.

4.get方式安全性差,post相对来说会好一点,一帮安全只能走https.

5.get方式是有缓存的,post没有缓存. get更适合向服务器获取数据,post更适合向服务器传递数据,

在JS中AJAX的两种写法：

GET方式:

var ajaxObj=new XMLHttpRequest();
ajaxObj.open("GET","../php/ajaxSubmitData.php?data=tody is wind");
ajaxObj.send()
ajaxObj.onreadystatechange= function () {
    if(ajaxObj.readyState===4&&ajaxObj.status){
        alert("发送成功");    
    }
}

POST方式：

var ajaxObj=new XMLHttpRequest();
ajaxObj.open("POST","../PHP/ajaxSubmitData.php");
ajaxObj.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// multipart/form-data 默认的以二进制方式传送
ajaxObj.send("data=我是post数据");
ajaxObj.onreadystatechange= function ()
if(ajaxObj.readyState===4&&ajaxObj.status===200){
alert("发送数据成功");
}
}

ajax获取从服务器返回的数据是 ajaxObj.responseText获取

ajax 给服务器发送数据: get post

get: url重写(拼接) ---- 数据量小 简单数据 不安全

post:send(数据) 请求体(页面看不到) 数据量大 简单或复杂数据 安全

application/x-www-form-urlencoded表示表单默认以字符串的形式发送

multipart/form-data 表单数据以二进制流的方式发送

ajaxObj.setRequestHeader其实就是修改请求头(请求报文)里面的额Content-type值

以上就是js中怎么写ajax的详细内容，更多请关注php中文网其它相关文章！

前端(VUE)零基础到就业课程：点击学习

清晰的学习路线+老师随时辅导答疑

自己动手写 PHP MVC 框架：点击学习

快速了解MVC架构、了解框架底层运行原理