AJAX原理及封装

原创 2016年05月30日 13:35:33

知识点:

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}";

版权声明:本文为博主原创文章,未经博主允许不得转载。

ajax封装数据原理

  • 2015年08月07日 21:04
  • 56KB
  • 下载

Ajax工作原理以及函数的简单封装

什么是AJAX? AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。 AJAX 不是新的编程语言,而是一种使用现有标准的新方法。...
  • sir1241
  • sir1241
  • 2016年10月17日 15:57
  • 715

AJAX的工作原理和封装

理解ajax之前,我们首先要知道什么是ajax(AsynchronousJavaScript and XML),翻译“异步的javascript 和 xml”,是指一种创建交互式网页应用的网页开发技术...

js原生Ajax 的封装和原理之浅析

原理及概念 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是一种用于创建快速动态网页的技术。 动态网页:是指可以通过服务器语言结...

JQuery Ajax的实现原理以及二次封装通用的Ajax

Ajax 的全称是Asynchronous JavaScript and XML 异步的javaScript和XML AJax所涉及到得技术:    1.使用CSS和XHTML来表示。 ...

《php---ajax简单示例---jquery内部运行原理》---jquery只是就ajax的一些功能进行了封装

校验用户名 //创建ajax引擎 function getXmlHttpObject(){ var xmlHttpRequest; //不同浏览器获取对象是不一样的 ...

Ajax实现原理

  • 2012年02月24日 15:28
  • 30KB
  • 下载

Ajax原理 和开发指南

  • 2012年03月02日 12:36
  • 42KB
  • 下载

Ajax技术组成与核心原理分析

1、Ajax 特点:局部刷新、提高用户的体验度,数据从服务器商加载  2、AJax的技术组成 不是新技术,而是之前技术的整合 Ajax: Asynchronous Javascript And...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:AJAX原理及封装
举报原因:
原因补充:

(最多只允许输入30个字)