AJAX Day01 基本内容

基本内容1.同步交互与异步交互    1.1同步交互    客户端向服务器端发送请求,到服务器端进行响应,这个过程中,用户是不能做任何其他事情(等).       1.2异步交互    客户端向服务器端发送请求，直到服务器端进行响应，这个过程中，用户可以做任何其他事情(不等)2.AJAX    2.1Asynchronous JavaScript and Xml    直译中文 - javascript和XML的异步    (不严格的定义)客户端与服务器端进行交互,而无需刷新当前页面的技术,称之为Ajax    Ajax实现的是B/S架构下的异步交互        2.2实现异步交互的技术         同步与异步的区别        2.2.1同步交互            执行速度相对比较慢            响应的是完整的HTML页面        2.2.2异步交互            执行速度相对比较快            响应的是部分数据3.Ajax具有核心对象        3.1XMLHttpRequest对象        创建XMLHttpRequest对象

function getXhr(){    // 声明XMLHttpRequest对象    var xhr = null;    // 根据浏览器的不同情况进行创建    if(window.XMLHttpRequest){    // 表示除IE外的其他浏览器    xhr = new XMLHttpRequest();    }else{    // 表示IE浏览器    xhr = new ActiveXObject('Microsoft.XMLHttp');    }    return xhr;    }    // 创建核心对象    var xhr = getXhr();

4.Ajax的核心对象        4.1属性            readyState            status        4.2方法            open() - 与服务器端建立连接            send() - 向服务器端发送请求        4.3事件            onreadystatechange事件        作用 - 监听服务器端的通信状态改变        5.实现Ajax的异步交互步骤    5.1创建XMLHttpRequest核心对象        固定写法 getXhr()函数      5.2与服务器端建立连接        5.2.1使用XMLHttpRequest对象的open(method,url)方法            method - 设置当前请求的类型            url - 设置当前请求的地址        5.2.2向服务器端发送请求            使用XMLHttpRequest对象的send(请求参数)方法            请求参数的格式 - key=value        5.2.3接收服务器端的响应数据            使用XMLHttpRequest对象的onreadystatechange事件,监听服务器端的通信状态                      使用XMLHttpRequest对象的readyState属性,判断服务器端的当前状态(0-4)                      使用XMLHttpRequest对象的status属性,判断服务器端的状态码(200)                          使用XMLHttpRequest对象的responseText属性,接收服务器端的响应数据        5.2.4GET与POST的区别            GET请求类型            send()方法不起作用,但是不能被省略            xhr.send(null);            请求参数 - 添加到URL?key=value       5.2.5POST请求类型            send()方法起作用            在send()方法被调用前,使用setRequestHeader()方法设置请求头信息            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

如下