一、概述

1、什么是ajax

可以与服务器进行[异步]交互的技术，浏览器无需刷新

2、什么时候出现ajax？

—- XMLHttp 微软
1999年微软公司发布IE5版本，内嵌了ajax技术
什么时候流行使用
2005年
google 公司发布产品 gmail邮箱服务，里边有使用ajax
javascript从此也被人们重视起来
什么地方可以使用ajax

3、应用场景

百度搜索效果
ajax无刷新分页
用户名是否被占用的校验
实现网页局部信息的刷新

具体应用：
163用户注册

传统的表单验证：

ajax表单验证

二、ajax 技术基础

ajax是javascript的一门技术
ajax涉及到的具体技术点：

使用ajax的过程就是对象调用属性和方法的过程。

1、ajax对象创建

创建对象具体操作

var obj = new XMLHttpRequest(); 主流浏览器(火狐、google、苹果、opera) var obj = new ActiveXObject(“Microsoft.XMLHTTP”); IE低版本浏览器创建对象

(1) . IE低版本创建ajax对象不同版本

//低版本IE创建对象 //var obj = new ActiveXObject("Microsoft.XMLHTTP"); //最低版本 //var obj = new ActiveXObject("Msxml2.XMLHTTP"); //较高版本 //var obj = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //较高版本 //var obj = new ActiveXObject("Msxml2.XMLHTTP.5.0"); //较高版本 //var obj = new ActiveXObject("Msxml2.XMLHTTP.6.0"); //最高版本

(2). 主流浏览器创建ajax对象

var obj = new XMLHttpRequest();

(3). 把创建对象的代码封装为一个函数

<script type="text/javascript"> { 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

>新建网页=> <script> { //1 创建ajax对象 var xhr = createXHR(); //2. 打开http请求 xhr.open('get','./02.php'); //3. 发送请求 xhr.send(null); } ==>

4 、ajax接收服务器相应response

<script> { //1 创建ajax对象 var xhr = createXHR(); //我们可以通过技术手段感知ajax不同的状态（5种） //alert(xhr.responseText); xhr.onreadystatechange = (xhr.readyState==4){ alert(xhr.responseText); } } //2. 打开http请求 xhr.open('get','./03.php'); //3. 发送请求 xhr.send(null); } >返回=="f1()" /> </body> ; ?>

5、get方式ajax请求使用

xhr.open(‘get’,url地址); xhr.open(‘post’,url地址);

get和post两种区别：

请求数据量

get 2k限制
-网址/index.php?name=zhangsan 数据量14字节 2048字节=2k

post请求 理论没有大小数据量限制，php显示是8M

数据请求形式

通过get方式请求ajax传递“中文”有问题

<script> { var xhr = createXHR(); xhr.onreadystatechange = (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); } ="text/css">> <h2>get请求</h2> 用户名：=/> => ; ['username']; ?>

get方式ajax请求两点注意：

给服务器传递的数据表现形式url?名称=值&名称=值

传递中文信息需要进行编码encodeURIComponent()

6、post方式ajax请求

参数如何传递

参数需要设置header头信息

是否可以传递get变量信息
a) 可以的，但是使用需要通过$_GET接收信息
b) 传递中文任然需要编码

传递中文信息
a) 各种浏览器都可以通过post方式传递中文，无需编码

• 共2页:
• 上一页
• 1
• 2
• 下一页