同步交互与异步交互
1.客户端向服务端发送请求，直到服务器端进行响应，这个过程中，用户是不能做任何其他事的（需要等）
2.客户端向服务端发送请求，直到服务端进行响应，这个过程中，用户是可以做其他事情的（不用等）
AJAX
1.asynchronous javascript and xml,直译中文为javascript和xml的异步
- AJAX是一种用来改善用户体验的技术，其实质是，使用XMLHttpRequest对象异步地向服务器发请求
- 服务器返回部分数据，而不是一个完整的页面，以页面无刷新的效果更改页面中的局部内容
4.Ajax的核心对象
XMLHttpRequerst对象
5.获取XMLHttpRequest对象
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){
//除IE外的其他浏览器
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
return xhr;
}
6.属性
- readyState 请求状态
- 0 尚未初始化
- 1正在发送请求
- 2请求完成
- 3请求成功，正在接受数据
- 4数据接收成功
- status 请求响应值
- 200 表示请求成功
- 202 请求被接受但处理未完成
- 400 错误的请求
- 404 资源未找到
- 500 内部服务器错误，如asp代码错误等
- responseText 服务器返回的文本
- responseXML 服务器返回的xml，可以当做DOM处理
7.方法 - 与服务端建立连接
open(method,url)
向服务器端发送请求
send()
取消请求
abort()
得到响应的所有http头
getAllResponseHeaders()
获取指定的http头
getResponseHeader()
指定请求的Http头
setRequestHeader()
8.事件
onreadystatechange事件
作用 - 监听服务端的通信状态改变
ajax的异步交互步骤
1.创建XMLHttpRequest核心对象
2.与服务区建立连接
使用XMLHttpRequest对象的open(method,url)
3.向服务器发送请求
- 使用XMLRequest对象的send()方法
- 请求参数的格式 - key=value
4.接受服务器响应的数据
-
使用XMLHttpRequest对象的readystatechange事件监听服务器端的通信状态
-
使用XMLHttpRequest对象的readyState属性，判断服务器端当前状态(0-4)
-
使用XMLHttpRequest对象的statue属性，判断服务器端的状态码(200)
-
使用XMLHttp对象的responseText属性，接受服务器端的响应数据
注意：get与post方式 -
get请求方式
send()方法不起作用，但是不能被省略
xhr.send(null) 请求参数，添加到url?key=value -
post请求方式
必须要在send()方法调用之前，使用setRequestHeader()方法设置请求头，参数为key-value
代码示例： -
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
用户名：<input type="text" id="user" name="us" />
<button id="btn">提交</button>
<div id="content" style="width: 100px;height:100px;border:1px solid black"></div>
</body>
<script type="text/javascript">
document.getElementById("btn").onclick = function(){
//将input中的内容异步提交到服务器，然后将服务器响应回来的内容，放到dav里面////1.创建ajax对象 var xhr = getXhr(); // 2.跟服务器建立连接,open第三个boolean可以设置同步交互还是异步交互，默认为true，为异步交互，现在ajax已经慢慢的弃用同步交互 var input = document.getElementById("user"); //post方式提交参数是放到请求体中 xhr.open("post","myPhp01.php"); xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded") // 3.发送数据,格式为key=value,多个参数用&隔开 xhr.send("user"+input.value); // 4.监听服务器的响应 xhr.onreadystatechange = function(){ //当数据接收完毕以及请求成功时 if (xhr.readyState == 4 && xhr.status == 200) { //将响应的内容放到div里 document.getElementById("content").innerHTML = xhr.responseText; } } function getXhr(){ //设置一个空变量 var xhr = null; //判断是否支持XMLHttpRequest if (window.XMLHttpRequest) {//支持非IE xhr = new XMLHttpRequest(); } else{ //不支持IE的方式 xhr = new ActiveXObject("Microsoft.XMLHttp"); } return xhr; } } </script> </html> -
php
<?php
$user = $_POST["user"];
echo $user."success";
/application/x-www.form-urlencoded:窗体数据被编码为名称/值对时将字符串的键值对转换/
?>
XML
1.HTML/XHTML/DHTML/XML
HTML:网页文档
XHTML:更严格的网页文档
DHTML:DOM|BOM
XML:可扩展的标记语言，可用于配置文件|数据格式
2.XML的文件为.xml
3.XML的定义方式与HTML非常相似
HTML的元素都是预定义好的
XML允许自定义元素
4.XML版本
1.0版本 1.1版本，几乎没人使用
5.XML作用
作为数据格式-存储数据的地方
6.XML语法
- 声明
<?xml version="1.0" encoding="utf-8" ?>
version-设置XML文件的版本
encoding-设置XML文件的编码
声明必须出现在0行0列上 - 定义元素
根元素，必须是双标签，只能定义一个
定义元素，元素名可以自定义，既可以双标签也可以是单标签
DOM解析XML字符串
1.创建DOM解析XML的解析器，解析器解析XML字符串
- IE浏览器
var parser = new ActiveXObject("Microsoft.XMLDOM");
parser.async = false;
xmlDoc = parser.loadXML(xmlFile); - 其他游览器
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(xmlFile,"application/xml");
2.解析XML元素与解析HTML元素一致
获取元素最常用的是getElementsByTagName很少使用ById和ByName
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function parserXML (xmlfile) {
var xmlDoc=null;//先设置对象，用来保存解析出来的xml文档对象
//获取解析器，用解析器解析xml文件或者xml格式字符串
if(window.DOMParser){
var parser=new DOMParser();
//load用来解析xml文件，loadXML用来解析xml格式的字符串
xmlDoc=parser.parseFromString(xmlfile,"text/xml");
//或者xmlDoc=parser.parseFromString(xmlfile,"application/xml");
}else{
var parser=new ActiveXObject("Microsoft.XMLDOM");
parser.async=false;
xmlDoc=parser.loadXML(xmlfile);
}
return xmlDoc;
}
var xmlDoc=parserXML("<province class='jiangxi'>江西省</province>");
console.log(xmlDoc);
var sheng=xmlDoc.getElementsByTagName("province")[0];
var className=xmlDoc.getElementsByTagName("province")[0].getAttribute("class");
console.log(sheng.innerHTML);
console.log(className);
</script>
</body>
</html>
网友评论