1.1ajax介绍
asynchronous:异步
异步,同步相对立的一对概念;
javascript;
and
xml( extensionable markup language),可扩展标记语言
异步的javascript和xml技术;
1.2xml介绍
xml是介于html和xtml之间的产物,用来解决早起传输数据时的,格式的问题。
xml和html最根本的区别:xml标签可扩展,用户自己定义,html标签是固定的
xml是用来传输数据的 ,html是用来显示数据的;
1.3应用场景
1.注册用户时,用户输入完毕需要从数据库查询是否存在提示;
2.百度输入框输入,从服务器查询相似信息;
1.4ajax对象的床架
说明:js通过XMLHttpRqquest对象和服务器搭线,进行交互
该对象的创建都是通过:new XMLHttpRqquest对象创建
//创建ajax对象,对象调用成员实现对服务器的请求
// //① 创建对象
// var xhr = new XMLHttpRequest();
//
// //监听ajax状态
// xhr.onreadystatechange = function(){
// if(xhr.readyState==4){
// //alert(xhr.responseText);
// document.getElementsByTagName('input')[0].value = xhr.responseText
// //document.body.innerHTML += xhr.responseText;
// }
// }
//
// //② 创建一个新的http请求(打开浏览器,输入请求地址)
// //xhr.open(请求方式get/post,请求地址[,异步同步请求]);
// xhr.open("get",'./index.php?uid=123');
//
// //③ 发送请求
// //xhr.send(post请求数据 / get请求设置null);
// xhr.send(null);
}
ajax对象的成员
属性:
responseText 以字符串形式接收服务器端返回的信息
readyState 表示ajax状态值
onreadystatechange 事件,该事件可以感知ajax状态(readyState)的变化
ajax请求过程中要随时感知其状态
方法:
open()创建一个新的http请求
send()发送请求到服务器
ajax有5种状态readyState:
0------> 创建ajax对象完毕
1------> 有调用open()方法
2------> 有调用send()方法
3------> 服务器端数据只返回了一部分
4------> 服务器端数据全部返回,ajax请求完成
*/
// function f1(){
// var xhr = new XMLHttpRequest();
//
// //设置事件onreadystatechange 感知ajax状态变化
// xhr.onreadystatechange = function(){
// if(xhr.readyState==4){
//// alert(xhr.responseText);
// document.body.innerHTML += xhr.responseText;
// }
// }
//
// xhr.open('get','./03.php');
//
// xhr.send(null);
// }