Ajax

1概念

全称:Asynchronous Javascript And XML  ---异步的        js和xml(标记语言)       

AJAX是使用js向服务器发送请求的技术;是浏览器端不用刷新整个页面就可以与服务器端通信的技术;

包括:HTML,CSS用于呈现;    DOM实现动态显示和交互; Javascript绑定和处理所有数据;    XML和JSON进行数据交换与处理;  

          XMLHttpRequest(AJAX的核心对象)对象用于进行异步请求数据读取   --- AJAX的所有操作都是通过该对象来完成的

2、XML(可扩展的标记语言,语法和HTML一致)

XML是自定义标签,且语法比html严格; 而HTML的标签都是预定义的;如  h1 p div span ....

在AJAX中默认情况是以XML作为响应数据的格式来接收数据的

大多使用是JSON的格式

同步请求、异步请求

1. 传统web请求---同步请求

传统的发送请求的方式都是同步请求:直接在地址栏输入地址---点击超链接---提交表单…同步请求在发送时,在响应返回前我们无法对网页做任何的操作       

- 同步请求在响应返回前用户需要一直等待,不能做的任何操作

- 同步请求一旦刷新就需要刷新整个页面,这样体验也不太好

2. AJAX请求---异步请求

异步请求在发送时,不会阻塞页面的其他部分,也就是说请求是通过浏览器的后台发送,不会对当前页面产生影响。

 并且当响应返回时,不需要刷新整个页面只需要刷新网页的局部    

  优点:

1.Ajax采用异步的交互方式

2. 彻底将页面与数据分离。

3. 基于标准化的对象,不需要安装特定的插件, 浏览器都能支持Ajax

3. 无需刷新整个页面, 减少用户等待时间, 提高用户体验。

4. 减轻服务器的负担,AJAX一般只从服务器获取只需要的数据。

  缺点:

1. 没有浏览历史, 无法通过回退按钮进行回退     2. 存在跨域请求问题 

3. 对搜索引擎支持比较弱---页面与数据分离

   如何设置请求的同步或异步?

request.open(method, url, true/false) 

 第3个参数   默认是true---异步   false---同步   

  同步请求与异步请求的区别?

1). 执行: request.send()

2). 异步: 此方法【立即返回】,后面立即获取请求的结果数据得不到, 只能在监听回调中获取(当结果数据返回后回调)

3). 同步: 此方法不会立即返回, 只有在服务器返回结果才返回。

不需要设置监听回调(在后面可以直接获取返回的结果数据)

3、使用步骤:

[一].创建XMLHttpRequest对象   

eg:  var xhr = new XMLHttpRequest();

var xhr = new ActiveXObject();  ---IE低版本

[二].设置请求的信息.open(method, url,async,user,password)

method ---get、post;

注:发送get请求时,有些浏览器会使用缓存,也就是只在第一次访问时发送,再次访问就不发了,而是从缓存中加载数据,浏览器的缓存是根据请求地址来保存的,只有地址改变就不会使用缓存了,可以在地址后面写随机数

url ---请求的地址,可以附加查询字符串

async---布尔值,是否发送异步请求,默认true,一般不传

 <Ctrl+点击open 查看其源码>

* post请求才可以指定发送数据:   name1=value1&name2=value2

* 如果是post请求,需要通过请求体发送请求参数的,还需要设置如下一个请求头:

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

[三].发送请求 xhr.send("请求体");

[四].接收响应

xhr.onreadystatechange = function(){ 

        if(xhr.readyState == 4 && xhr.status == 200){

                  console.log(xhr.responseText)  ---获取文本格式的响应

                  console.log(xhr.responseXML)  ---获取XML格式的响应

        }

};    

xhr.readyState ==数字  ---查看当前请求的状态

0:请求未初始化(xhr对象刚建立);1:服务器连接已建立

2:请求已接收; 3:请求处理中  4:请求已完成,且响应已就绪

xhr.onreadystatechange用来监听readyState的改变,会在readyState发送变化时触发

xhr.status == 数字

200: "OK";           304:请求重定向,重定向到缓存;  

404:请求路径未找到   500:服务器错误(前端人员的福音)

u  jQuery中的AJAX   $.ajax()   $.get()   $.post()   $.getJson()

eg :  $.ajax({

        type:get/post ;   url: ‘/地址 ’;    data:’请求参数’;

        success:function(msg){   请求成功以后调用  --msg 形参 实参是成功以后的数据

        alert(msg)

}

})

$.get("/tool6" ,function (data) {})

        $.post("/tool6",{username : "baobao"},function (data) {})

原文地址:https://www.cnblogs.com/renzm0318/p/8971130.html