(2). 主流浏览器创建ajax对象
var obj = new XMLHttpRequest();
(3). 把创建对象的代码封装为一个函数
<script type="text/javascript">
function createXHR(){
//根据不同浏览器使用不同方式ajax对象
//IE7及更高版本已经集成XMLHttpRequest实例化ajax方法
var obj = null;
if(window.XMLHttpRequest){
//创建ajax对象-主流浏览器
obj = new XMLHttpRequest();
} else {
//以上ajax对象需要根据浏览器情况选择最新的版本使用
var version = ['Msxml2.XMLHTTP.6.0sljdlksd','Msxml2.XMLHTTP.5.0','Msxml2.XMLHTTP.3.0','Msxml2.XMLHTTP','Microsoft.XMLHTTP'];
for(var i in version){
try{
//如果obj==undefined,就走catch,但是程序不会停止
obj = new ActiveXObject(version[i]);
break;
} catch (e){
}
}
}
return obj;
}
var xhr = createXHR();
alert(xhr);
</script>
2、ajax对象的成员属性和成员方法
(1) 成员属性
(2)成员方法
ajax和浏览器访问页面信息都是走的http协议。
3、通过ajax向服务器发起请求request
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body>
<script>
//向服务器发起请求
function f1(){
//1 创建ajax对象
var xhr = createXHR();
//2. 打开http请求
xhr.open('get','./02.php');
//3. 发送请求
xhr.send(null);
}
</script>
<h2>请求</h2>
<input type="button" value=" 触发" onclick="f1()" />
</body>
</html>
4 、ajax接收服务器相应response
<script>
function f1(){
//1 创建ajax对象
var xhr = createXHR();
//我们可以通过技术手段感知ajax不同的状态(5种)
//alert(xhr.responseText);
xhr.onreadystatechange = function(){
//ajax状态改变就会触发该函数执行
//判断readyState==4就可以接收服务器信息
if(xhr.readyState==4){
alert(xhr.responseText);
}
}
//2. 打开http请求
xhr.open('get','./03.php');
//3. 发送请求
xhr.send(null);
}
</script>
<body>
<h2>返回</h2>
<input type="button" value=" 触发" onclick="f1()" />
</body>
<?php
echo "response";
?>
5、get方式ajax请求使用
xhr.open(‘get’,url地址);
xhr.open(‘post’,url地址);
get和post两种区别:
-
请求数据量
- get 2k限制
-http://网址/index.php?name=zhangsan 数据量14字节 2048字节=2k - post请求 理论没有大小数据量限制,php显示是8M
- get 2k限制
-
数据请求形式
- get是在url地址后边通过请求字符串传递
- post请求的数据在服务器内部通过form表单以xml形式传递数据
-
通过get请求如何传递变量数据
-
通过get方式请求ajax传递“中文”有问题
- a) 在url地址里边传递中文有问题
- b) urldecode()解码 urlencode()编码
- c) 经过以上urlencode编码的汉字在url地址栏里边可以正常使用
- d) encodeURIComponent(); javascript对中文编码,url地址传递
<script>
function f1(){
var xhr = createXHR();
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
alert(xhr.responseText);
}
}
//通过dom方式获得input的value值
var username = document.getElementById('username').value;
username = encodeURIComponent(username);
xhr.open("get","./04.php?username="+username);
xhr.send(null);
}
</script>
<style type="text/css">
</style>
</head>
<body>
<h2>get请求</h2>
用户名:<input type="text" id="username" name="username" /><br />
<input type="button" value="get请求" onclick="f1()">
</body>
<?php
//连接数据库
echo "abcd";
//接收客户端过来的get变量信息
echo $\_GET['username'];
?>
get方式ajax请求两点注意:
- 给服务器传递的数据表现形式url?名称=值&名称=值
- 传递中文信息需要进行编码encodeURIComponent()
6、post方式ajax请求
- 参数如何传递
- 参数需要设置header头信息
- 是否可以传递get变量信息
a) 可以的,但是使用需要通过$_GET接收信息
b) 传递中文任然需要编码 - 传递中文信息
a) 各种浏览器都可以通过post方式传递中文,无需编码 - 具体使用:
<script>
function f1(){
var xhr = createXHR();
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
alert(xhr.responseText);
}
}
//制作一个请求字符串
var str = "name=tom&age=24&addr=北京";
var h = encodeURIComponent('篮球');
xhr.open("post","./05.php?info=milk&hobby="+h);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(str);
}
</script>
<body>
<h2>post请求</h2>
<input type="button" value="post请求" onclick="f1()">
</body>
form表单给服务器传递数据是通过XML格式把数据传递到服务器, 现在需要把ajax给服务器传递的数据模仿成form表单的xml数据
setRequestHeader 该方法在**open()**方法之后调用
7 、get请求和post请求
HTTP
-
HTTP 报文结构是怎样的?
-
HTTP有哪些请求方法?
-
GET 和 POST 有什么区别?
-
如何理解 URI?
-
如何理解 HTTP 状态码?
-
简要概括一下 HTTP 的特点?HTTP 有哪些缺点?
-
对 Accept 系列字段了解多少?
-
对于定长和不定长的数据,HTTP 是怎么传输的?
-
HTTP 如何处理大文件的传输?
-
HTTP 中如何处理表单数据的提交?
-
HTTP1.1 如何解决 HTTP 的队头阻塞问题?
-
对 Cookie 了解多少?
-
如何理解 HTTP 代理?
-
如何理解 HTTP 缓存及缓存代理?
-
为什么产生代理缓存?
-
源服务器的缓存控制
-
客户端的缓存控制
-
什么是跨域?浏览器如何拦截响应?如何解决?