ajax学习笔记

1.http协议

1.1 http协议

● 超文本传输协议（HTTP，HyperText Transfer Protocal ），

是简单、可靠的互联网文件传输协议。“上网”这个事儿的本质，

就是你输入网址之后，浏览器发出HTTP请求，请求服务器上的文件。

服务器上的文件，再通过HTTP传输到本地，在浏览器中进行渲染。

● 一次HTTP请求，有上行请求、下行响应两部分。

● 一张网页，可能产生多个HTTP的请求。

● 通常，浏览器产生HTTP请求，是由于用户输入了新的网址、

或者点击了超级链接，使页面跳转，这将导致页面的全局刷新。

而Ajax技术，可以使网页悄悄地、偷偷地发起HTTP请求，

请求回来的数据在页面局部刷新呈递。

1.2 ajax实现原理

原理：

在不刷新页面的情况下，浏览器悄悄地、异步向服务器发出HTTP请求。

服务器收到请求后，传回新的格式化数据（通常是JSON）。

浏览器通过DOM将新数据呈递显示，页面仅局部刷新。

1.3 ajax步骤

1.创建ajax对象 XMLHttpRequest() 内置对象 XMLHttpRequest

var xhr=new XMLHttpRequest();

2.准备请求内容

open('请求方式','请求地址','异步')

xhr.open('get','test.txt',true);

3.发送请求

xhr.send(null);//xhr.send()

4.监听函数---获取返回的数据

xhr.onreadystatechange=function(){

if(xhr.readyState==4){

if(xhr.status==200){

console.log(xhr.responseText);

}

}

}

1.4 代码截图

 

ajax请求方式 get和post传递参数

1.get传递参数

Ajax发起GET请求

● open()参数中，需要对URL需要用问号缀参数。send()参数是null。

● 用encodeURIComponet()函数处理可能出现的非英语字符。

● 注意URL拼接格式。能不能编写一个实用函数，能够非常方便的拼接URL。

代码演示

2.post传递参数

Ajax发起POST请求

● open()参数中，URL不用问号缀参数。send()参数是参数串。

● POST请求在服务器端比较难处理，需要用服务器写对应“流处理”程序。但是，如果是表单提交，那么PHP内置了相应处理程序。Ajax如果需要模拟表单提交，那么需要在send前设置：

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

代码图片

 

 

 

ajax获取本地json数据

1.json数据

 

 

 

2.效果

3.代码实现