Ajax入门笔记

作者: JONE 分类: 编程 发布时间: 2017-09-10 19:08

一、什么是Ajax

A:asynchronous 异步

j:javascript  js语言

a: And   和

x:XML 万能的数据传输格式

Ajax总结:异步的javascript与XML,这就是Ajax的介绍

二、同步请求与异步请求

(1、 传统的同步请求

运行步骤:用户->客户端浏览器->发送请求->用户等待->服务器端接收请求进行处理->返回结果->用户继续操作

由上图可知,同步请求给用户的体验就是一个不连续的过程。

(2、  Ajax异步请求

运行步骤:用户->客户端浏览器->发送请求->Ajax引擎->处理->发送到服务器端进行处理->先返回一部分数据->用户继续操作->返回所有数据->在继续请求…

由上图可知,异步请求给用户的体验就是一个连续的过程,体验度非常好

三、Ajax对象

(1 、基于IE内核的浏览器

var xhr = new ActiveXObject(‘Microsoft.XMLHTTP’);

(2 、基于W3C内核的浏览器

var xhr = new XMLHttpRequest();

(3 、Ajax对象的兼容性问题

<script>

//封装一个获取DOM的id对象的函数

function $(id){

return document.getElementById(id);

}

</script>

 

<script>

//封装一个函数来解决ajax的兼容性问题

function createXhr(){

try{

//基于IE内核浏览器

return new ActiveXObject(‘Microsoft.XMLHTTP’);

}catch(e){

//屏蔽错误的输出

}

try{

//基于W3C的浏览器

return xhr = new XMLHttpRequest();

}catch(e){}

//若执行到此,这说明用户使用的浏览器不支持ajax

alert('您的浏览器不支持Ajax');

}

</script>

四、Ajax中对象的属性与方法

(1 、方法

    •  open(method, url)  初始化对象
      参数说明
      method 请求的http类型,可以是get 也可以是post
      url 请求的url地址
    •   setRequestHeader(header,value) :设置请求头信息
      参数说明:header :请求头名称,value :请求头的值
    •   send(content) :发送Ajax请求
      参数说明:
      content :如果是get请求时,此参数为null
      如果是post请求时,此参数就是要传递的数据

(2、 属性

    • onreadystatechange :当Ajax状态码发生改变时所触发的回调函数
    • readyState :Ajax状态码
      0:表示对象已建立,但未初始化,调用了createXhr方法,但是未调用open方法
      1:表示对象已初始化,但未发送,调用了open方法,但是未调用send方法
      2:已调用send方法进行请求,调用了send方法
      3:正在接收数据(接收到一部分),客户端已经接收到了一部分返回的数据
      4:接收完成,客户端已经接收到了所有数据
    • status :http响应状态码,200代表成功获取服务器端数据,404未找到页面
    • statusText :http响应状态文本
    • reponseText :如果服务器端返回字符串,使用responseText进行接收
    • responseXML :如果服务器端返回XML数据,使用responseXML进行接收

五、Ajax中的get请求

(1、 记口诀(五步走)

第一步:创建Ajax对象  var xhr = createXhr();
第二步:设置回调函数  xhr.onreadystatechange = function() {}
第三步:初始化Ajax对象  xhr.open(‘get’,url);
第四步:发送Ajax请求  xhr.send(null);
第五步:判断与执行  回调函数内部判断if(xhr.readyState == 4) {}
返回结果:字符串,使用xhr.responseText
XML数据,使用xhr.responseXML

(2、Demo.html  配合上文中已封装好的两个函数使用

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Ajax中get请求五步走</title>

<script src='public.js'></script>

<script>

//定义页面载入事件

window.onload=function() {

//获取btnok按钮

$('btnok').onclick=function() {

//1、创建Ajax对象

varxhr=createXhr();

//2、设置回调函数

xhr.onreadystatechange=function() {

//5、判断与执行

if(xhr.readyState==4&&xhr.status==200) {

alert(xhr.responseText);

}

}

//3、初始化Ajax对象

varurl='demo.php?name=zhangsan&pass=123456';

xhr.open('get',url);

//4、发送Ajax请求

xhr.send(null);

}

}

</script>

</head>

<body>

<inputtype="button"id='btnok'value='发送Ajax请求'/>

</body>

</html>

Demo.php 接收处理Demo.html传过来的数据,并通过echo输出相应的数据给Demo.html

<?php

//1、设置响应头信息

header('Content-type:text/html; charset=utf-8');

//2、接收数据

$name = $_GET['name'];

$pass = $_GET['pass'];

//3、输出结果

echo "用户名:{$name},密码:{$pass}";

结果下图

六、去缓存,

(1、方案一:给 open(method,url) url的实际链接后添加参数随机数或者时间戳参数,因为浏览器对第一次访问的URL进行缓存之后,第二次访问相同的URL实际上访问的是缓存文件,通过不断的更改URl参数之后,浏览器就要不断的加载新的URL网页,故可以解决缓存带来的数据不能及时更新的问题。

(2、方案二:在客户端使用If-Modified-Since缓存时间来解决缓存问题

方案一、方案二示例如下

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>用户注册</title>

<script src='public.js'></script>

<script>

//定义页面载入事件

window.onload=function() {

//获取username文本框

$('username').onblur=function() {

//1、创建Ajax对象

varxhr=createXhr();

//2、设置回调函数

xhr.onreadystatechange=function() {

//5、判断与执行

if(xhr.readyState==4) {

if(xhr.status==200) {

//获取返回结果,用户名是否可用

if(xhr.responseText==1) {

$('tip').innerHTML='<font color="red">用户名已被注册</font>';

} else {

$('tip').innerHTML='<font color="green">用户名可以使用</font>';

}

}

} else {

$('tip').innerHTML='<img src="load.gif" />';

}

}

//3、初始化Ajax对象

varusername=$('username').value;

//使用随机数解决Ajax的缓存问题

//var url = 'demo07.php?username='+username+'&_='+Math.random();

//使用时间戳的形式解决Ajax的缓存问题

//var url = 'demo07.php?username='+username+'&_='+new Date().getTime();

//定义请求的url地址

varurl='demo07.php?username='+username;

xhr.open('get',url);

//设置请求头信息

//xhr.setRequestHeader('If-Modified-Since','0');

//4、发送Ajax请求

xhr.send(null);

}

}

</script>

</head>

<body>

用户名:<inputtype='text'id='username'size='30'/>

<spanid='tip'></span>

</body>

</html>

(3、方案三、在服务器端通过header来禁止缓存,open(method,url) URL所对应的PHP文件

<?php

header("Cache-Control: no-cache, must-revalidate");

七、Ajax中的post请求

(1、Ajax中post请求六步走(口诀)

第一步:创建Ajax对象 var xhr = createXhr();
第二步:设置回调函数 xhr.onreadystatechange = function() {}
第三步:初始化Ajax请求 xhr.open(‘post’,url);
第四步:设置请求头信息 xhr.setRequestHeader(‘Content-type’,’application/x-www-form-urlencoded’);
第五步:发送Ajax请求 xhr.send(data);
第六步:判断与执行 if(xhr.readyState == 4 && xhr.status == 200) {}

(2、Demo。html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Ajax中post请求六步走</title>

<script src='public.js'></script>

<script>

//定义页面载入事件

window.onload=function() {

//获取btnok按钮并绑定事件

$('btnok').onclick=function() {

//1、创建Ajax对象

varxhr=createXhr();

//2、设置回调函数

xhr.onreadystatechange=function() {

//6、判断与执行

if(xhr.readyState==4&&xhr.status==200) {

alert(xhr.responseText);

}

}

//3、初始化Ajax对象

xhr.open('post','demo10.php');

//4、设置请求头信息

xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');

//5、发送Ajax请求

varuser=$('user').value;

xhr.send('user='+user);  //例如:user=admin&pass=123456对应php的$_POST['user']和$_POST['pass']

}

}

</script>

</head>

<body>

<inputtype='text'id='user'/>

<inputtype='button'id='btnok'value='Ajax中post请求'/>

</body>

</html>