Ajax
Posted 钢铁小坦克
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax相关的知识，希望对你有一定的参考价值。
HTTP协议主要由请求和响应构成
请求由客户端发起，其规范格式为：请求行、请求头、请求主体。
请求头由请求方式、请求URL和协议版本构成.
X.readyState=1时 已经调用
X.readyState=2时 接收到头信息
X.readyState=3时 接收到响应主体
X.readyState=4时 响应完成
向服务器发送请求
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
open(method,url,async)
规定请求的类型、URL 以及是否异步处理请求。
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）
send(string)
将请求发送到服务器。
string：仅用于 POST 请求
GET 还是 POST？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
PS：get没有请求主体
用post时
setRequestHeader(header,value)
向请求添加 HTTP 头。
header: 规定头的名称
value: 规定头的值
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Ajax_1</title>
<style>
h3{
font-size28px;
text-align:center;
}
</style>
</head>
<body>
<script type="text/javascript">
<h3>XMLHttpRequest</h3>
// XMLHttpRequest是向服务器发起请求的
<p id="result"></p>//假设已经写了个php文件
var xhr=new XMLHttpRequest();
//请求行 open()方法是用于打开一个新的浏览器窗口或查找一个已命名的窗口
<!--get在JS里是获取参数的意思 这个代码是设置请求行-->
// 请求行由请求方式/请求地址组成
xhr.oprn(‘post‘,‘8-1.php‘)
// 设置请求头
// 当以post形式提交表单时，请求头里会设置Content-Type:application/x-www/form-urlencoded,以get形式，不需要
// get是从服务器上获取数据，post是向服务器传送数据 get没有请求主体 post有
xhr.setRequestHearder(‘Content-Type‘,‘application/x-www/form-urlencoded‘);
// 设置请求主体 send向服务端提交数据
xhr.send(‘username=itcast&pass=123‘);
// 接受服务器响应 闭包的形式 onreadystatechange Ajax的事件
xhr.onreadystatechange=function{
// readyState 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。readyState
// 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
// 0: 请求未初始化
// 1: 服务器连接已建立
// 2: 请求已接收
// 3: 请求处理中
// 4: 请求已完成，且响应已就绪
// 每当 readyState 改变时，就会触发 onreadystatechange 事件。
console.log(xhr.responseText);
if (xhr.readyState==4) {
//通过DOM打印到页面上 为什么建个id选择器？querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素 innerHTML在JS是双向功能：获取对象的内容 或 向对象插入内容；
document.querySelector(‘#result‘).innerHTML=xhr.responseText()
}
}
</script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Ajax_2</title>
<style>
h3{
font-size:28px;
text-align:center;
}
</style>
</head>
<body>
<h3>XMLHttpRequest</h3>
<p id="result"></p>
<script>
var xhr =new XMLHttpRequest();
xhr.open(‘get‘,‘8-3.php‘);
xhr.send(null);
xhr.onreadystatechange=function(){
console.log(xhr.status)
//status返回码 为了严谨一般都这样写 200responseText表示OK 其余数值看博客
if (xhr.readyState==4&&xhr.status==200) {
console.log(xhr.responseText);
}
}
</script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>AJax之异步&同步</title>
<style>
h3{
font-size:28px;
text-align:center;
}
</style>
</head>
<body>
<h3>XMLHttpRequest</h3>
<p id="result"></p>
<script>
var xhr= new XMLHttpRequest();
//其实还有第三个属性 默认为trur表示异步 那么false表示同步
xhr.open(‘get‘,‘666.php‘,false);
xhr.send(null);
console.log(xhr.responseTexr);
console.log(‘我被执行了‘);
</script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Ajax之传参</title>
<style>
h3{
font-size:28px;
text-align:center;
}
</style>
</head>
<body>
<h3>XMLHttpRequest</h3>
<p id="result"></p>
<script>
var xhr = new XMLHttpRequest();
// 当以get方式走的时候 send是null那么 参数放到open ‘8-3.php‘?name=itcast$age=10记得加问好
xhr.open(‘post‘,‘8-3.php‘);
xhr.setRequestHearder(‘Content-Type‘,‘application/x-www/form-urlencoded‘);
// name=itcast这是固定格式 age=10这是要发送的数据
// name=itcast这是可以修改的 后端提供的 不需要管
xgr.send(‘name=itcast$age=10‘);
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200)
var result=new responseText();
console.log(xhr.result);
}
</script>
</html>
以上是关于Ajax的主要内容，如果未能解决你的问题，请参考以下文章