关闭

AJAX原理及封装

标签: csshtmljavascript异步AJAX
86人阅读 评论(0) 收藏 举报
分类:

知识点:

1. ajax : Asynchronous JavaScript and XML 异步JavaScript和XML,即用javascript异步形式去操作xml。功能是进行数据交互

2.try {

} catch (e) {

}如果有错误,则会执行catch{},并且传入错误信息参数。 ,如果不用这个语句用if{}else{},如果程序出错,程序会终止。就不会继续往下执行

3.//打开浏览器
/*
1.创建一个ajax对象
ie6以下new ActiveXObject('Microsoft.XMLHTTP')

                        2.标准浏览器下,XMLHttpRequest()
*/
var xhr = null;
/*if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}*/
try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}

4.表单:数据的提交
 三个属性
    action : 数据提交的地址,默认是当前页面
        method : 数据提交的方式,默认是get方式
        1.get
            把数据名称和数据值用=连接,如果有多个的话,那么他会把多个数据组合用&进行连接,然后把数据放到url?后面传到指定页面

                get方法url长度限制:不要通过get方式传递过多的数据
               2.post

               与get一样,只需要把get改成post即可。理论上无限制

               3.request

                 既能获得get方式的数据也能获得post方式数据

        enctype : 提交的数据格式,默认application/x-www-form-urlencoded
    <form action="1.get.php" enctype="application/x-www-form-urlencoded">
    <input type="text" name="username" />
        <input type="text" name="age" />
        <input type="submit" value="提交" />
    </form>

5.//在地址栏输入地址
/*
open方法
参数
1.打开方式
2.地址
3.是否异步
异步:非阻塞 前面的代码不会影响后面代码的执行
同步:阻塞 前面的代码会影响后面代码的执行

                                         true 默认异步,false默认同步
*/
xhr.open('get','1.txt',true);

6.  //等待服务器返回内容
/*
* 请求状态监控
onreadystatechange事件
readyState属性:请求状态
0 (初始化)还没有调用open()方法
1 (载入)已调用send()方法,正在发送请求
2 (载入完成)send()方法完成,已收到全部响应内容
3 (解析)正在解析响应内容
4 (完成)响应内容解析完成,可以在客户端调用了
status属性:服务器(请求资源)的状态
返回的内容
responseText:返回以文本形式存放的内容
responseXML:返回XML形式的内容


readyState : ajax工作状态
responseText : ajax请求返回的内容就被存放到这个属性下面
on readystate change : 当readyState改变的时候触发
status : 服务器状态,http状态码
*/
xhr.onreadystatechange = function() {

if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
alert( xhr.responseText );
} else {
alert('出错了,Err:' + xhr.status);
}

}

7  .          /*get方式两个问题(从服务器获取内容,存在缓存问题,第二次在缓存中找,如果后台修改,结果也不会变化)
1.缓存 在url?后面连接一个随机数,时间戳。。&不能别忘记。new Date().getTime()随机数
2.乱码 编码encodeURI,如果不用encodeURI,输入中文无法识别
*/
xhr.open('get','2.get.php?username='+encodeURI('刘伟')+'&age=30&' + new Date().getTime(),true);

8.     /* post方式问题(向服务器提交内容,不存在缓存问题)
post方式数据放在send()方法中,然后setRequstHeader()方法告诉发送的数据类型*/
xhr.open('post','2.post.php',true);
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
xhr.send('username=leo&age=30');


9. 完整的程序

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<!--<script src="jquery.js"></script>-->
<script>
//$(function(){}) //阻塞 -> 同步


//非阻塞 - 异步
/*setTimeout(function() {
alert(1);
}, 2000);


alert(2);*/


window.onload = function() {

var oBtn = document.getElementById('btn');


oBtn.onclick = function() {

//打开浏览器
/*
1.创建一个ajax对象
ie6以下new ActiveXObject('Microsoft.XMLHTTP')
*/
var xhr = null;
/*if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}*/
try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}

//alert( xhr.readyState );
//在地址栏输入地址
/*
open方法
参数
1.打开方式
2.地址
3.是否异步
异步:非阻塞 前面的代码不会影响后面代码的执行
同步:阻塞 前面的代码会影响后面代码的执行
*/
/*get方式两个问题(从服务器获取内容,存在缓存问题,第二次在缓存中找,如果后台修改,结果也不会变化)
1.缓存 在url?后面连接一个随机数,时间戳。。&不能别忘记。new Date().getTime()随机数
2.乱码 编码encodeURI,如果不用encodeURI,输入中文无法识别
*/
/* post方式问题:(向服务器提交内容,不存在缓存问题)
post方式数据放在send()方法中,然后setRequstHeader()方法告诉发送的数据类型*/
// xhr.open('get','2.get.php?username='+encodeURI('刘伟')+'&age=30&' + new Date().getTime(),true);
//提交 发送请求
// xhr.send();
xhr.open('post','2.post.php',true);
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
xhr.send('username=leo&age=30');

//等待服务器返回内容
/*
* 请求状态监控
onreadystatechange事件
readyState属性:请求状态
0 (初始化)还没有调用open()方法
1 (载入)已调用send()方法,正在发送请求
2 (载入完成)send()方法完成,已收到全部响应内容
3 (解析)正在解析响应内容
4 (完成)响应内容解析完成,可以在客户端调用了
status属性:服务器(请求资源)的状态
返回的内容
responseText:返回以文本形式存放的内容
responseXML:返回XML形式的内容


readyState : ajax工作状态
responseText : ajax请求返回的内容就被存放到这个属性下面
on readystate change : 当readyState改变的时候触发
status : 服务器状态,http状态码 200 ok
*/
xhr.onreadystatechange = function() {

if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
alert( xhr.responseText );
} else {
alert('出错了,Err:' + xhr.status);
}
}

}

}
}
</script>
</head>


<body>
<input type="button" value="按钮" id="btn" />
</body>
</html>

2.get.php

<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);


$username = $_GET['username'];
$age = $_GET['age'];


echo "你的名字:{$username},年龄:{$age}";


2.post.php


<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);


$username = $_POST['username'];
$age = $_POST['age'];


echo "你的名字:{$username},年龄:{$age}";

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:13278次
    • 积分:457
    • 等级:
    • 排名:千里之外
    • 原创:32篇
    • 转载:8篇
    • 译文:0篇
    • 评论:0条
    文章存档