ajax的步骤与封装ajax()方法

       Ajax技术核心是XMLHttpRequest对象(简称XHR),这是由微软首先引入的一个特性,其他浏览器提供商后来都提供了相同的实现。在XHR出现之前,Ajax式的通信必须借助一些hack手段来实现,大多数是使用隐藏的框架或内嵌框架。 
简单来说,它是一门与服务端进行数据交换的技术。

      什么是同步?

    传统方式提交表单都是同步的方式提交,表单必须要有name属性,发生页面跳转(一个很常见的表单提交。样式也是采用bootstrap )

HTML (传统表单提交)

ajax的步骤与封装ajax()方法

 1.同步提交表单会发生地址栏的变化(post)

ajax的步骤与封装ajax()方法

2.同步提交表单(get)

ajax的步骤与封装ajax()方法

ajax的步骤与封装ajax()方法

编写表单的异步提交 
ajax它是分为4个阶段

  1.实例化ajax对象

ajax的步骤与封装ajax()方法

2.打开浏览器链接

ajax的步骤与封装ajax()方法

3.向服务器发送数据

ajax的步骤与封装ajax()方法

4.等待服务器返回数据

ajax的步骤与封装ajax()方法

readyState  ,就是当前的请求状态,他有五种表现形式

ajax的步骤与封装ajax()方法 
然后在判断status状态, 
ajax的步骤与封装ajax()方法

编写post异步提交表单

ajax的步骤与封装ajax()方法

 

用get方式,与post方式类似。在这里需要注意!

Post提交表单的数据形式

ajax的步骤与封装ajax()方法

编写get异步提交表单

ajax的步骤与封装ajax()方法

 

封装ajax()方法

1.反序列化data数据

ajax的步骤与封装ajax()方法

2.利用arr.join()方法,拼接data数据

ajax的步骤与封装ajax()方法

ajax的步骤与封装ajax()方法

 

3.封装转换getdata方法

ajax的步骤与封装ajax()方法

完善post请求的ajax方法

ajax的步骤与封装ajax()方法

 

完善get请求的ajax方法

ajax的步骤与封装ajax()方法

 

前台调用ajax()方法

ajax的步骤与封装ajax()方法