了解ajax:
/ajax: (前后端进行交互) /自我理解:ajax调用可以更改公告里面的信息 不用全部更改/
概念:
什么是异步:当请求发送出去后,就可以处理其他的事情,当响应返回后在重新处理响应结果;
什么是同步:在请求过程中,如果没有返回结果,只能一直等待直到有回应为止;
ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术.
ajax是一种用于创建快速动态网页的技术.
特点:
ajax可以使网页实现一步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新.
语法:
第一步:创建ajax对象
var xml=new XMLHttpRequest();
第二步:打开链接通道
xml.open(method,url,async);//请求方式 ,请求路径, 异步或同步
method:请求方式 get 或post
get:只能传输少量数据 通过路径携带传输 传输不安全 (传送速率快)
post: 对于传输的数据没有大小限制 独立传输 相当安全 (传送速率慢)
第三步:发送请求
xml.send();
第四步:接收返回值 监听状态
xml.onreadystatechange=function(){
if(xml.readyState 4&&xml.status200){//状态码4或者200时
alert(“请求成功”+xml.responseText);//弹出返回值
}
}else{
alert(“请求失败”+xml.status);
}
readyState状态码
0 :状态初始化(还没有调用open方法)
1 :服务器已连接(send方法完成,正在发生请求)
2 :请求已接受(send完成,已接收到全部响应内容)
3 :请求处理中(解析响应内容)
4 :请求已完成,且响应已就绪
HTTP状态码 status
1** 信息,服务器收到请求,需要请求者继续执行操作
2** 成功,操作被成功接收并处理(当值是==200时请求成功)
3** 重定向,需要进一步的操作以完成请求
4** 客户端错误,请求包含语法错误或无法完成请求(前端错误)
5** 服务器错误,服务器在处理请求的过程中发生了错误(服务器错误)
xml取得响应的内容
responseText:获得字符串形式的相应数据
responseXML:获得xml形式的相应数据
status和statusText:以数字和文本形式返回http状态码
getALLResponseHeader():获取所有的响应报头。
getResponseHeader():查询响应中的某个字段的值
readyStatus属性:响应返回成功的时候得到通知。
域名.Json
*/
引入index.js文件
"name1=zhangsan&name2=lisi&name3=wangwu"
css样式
<style>
p{
text-align: center;
font-weight: bold;
font-size: 50px;
}
</style>
html
<ul>
<li></li>
<li></li>
<li></li>
</ul>
JavaScript
<script>
//ajax:ajax是异步获取// var obj="sgfghjkl";//创建添加获取的内容·(post方式提交)
var body=document.body;//全局body
var lis=document.getElementsByTagName("li"); //获取li
//1.创建ajax对象
var xml=new XMLHttpRequest();
//2.服务器 建立打开链接通道(路径打开方式:以查寻字符串的方式出现)
//1.例子: xml.open("get","http://www.baidu.com?name=gao&age=18&pass=123456",true);//请求方式 请求路径 async(同步或异步)
//2.例子:xml.open("get","http://www.baidu.com?"+obj ,true);//obj:用变量名:来存储字符串内容
xml.open("get","index.js",true);//请求方式 、请求路径、 async(同步false或异步true)、
//3.发送请求
xml.send();//1.如果是get方式请求 send()方法不需要添加任何值//2.如果是post方式提交,那么参数就是你要提交的数据
//1.post方式提交:实在xml.send(obj) 2.如果是get方式提交: 2步骤.在xml.open("get","http://www.baidu.com?"+obj,true)
//4.接收 监听
xml.onreadystatechange=function(){
if(xml.readyState==4&&xml.status==200){
//readyState==4请求已完成且响应已就绪,status==200操作成功并处理。
//例子if: 1.document.write(xml.responseText);//获得字符串形式的相应数据
var str=xml.responseText;
var arr=str.split("&");//split()字符串转成数组字符串的每一项
for(var i in arr){
console.log(arr[i]);//Array[3]数组的每一项
arr[i]=arr[i].slice(arr[i].indexOf("=")+1);
}
console.log(arr);// ["zhangsan", "lisi", "wangwu""]
for(var j=0;j<lis.length;j++){
console.log(lis[j]);//<li></li><li></li><li></li>
lis[j].innerHTML=arr[j];
}
}else {
//例子else: 1.body.innerHTML="<p>"+xml.status+"<br>您的页面走丢了</p>"
// 1.console.log(xml.status);//如果错误就查看状态码 查找错误原因
}
}
</script>
效果如下: