ajax整合

1、客服端与服务器

1.1、客服端与服务器通信过程

ajax整合_第1张图片

1.2、网页请求数据

ajax整合_第2张图片

1.3、资源请求

ajax整合_第3张图片

2、ajax请求(网页与服务器之间的数据交互)

2.1jquery中得到ajax

ajax整合_第4张图片

2.1.1$.get()函数的语法

ajax整合_第5张图片

 eg:有参请求

2.1.2$.post()函数语法

ajax整合_第6张图片

 eg:

2.1.3$.ajax()函数语法

ajax整合_第7张图片

 eg:

   

3、接口

 3.1接口请求过程

ajax整合_第8张图片

 ajax整合_第9张图片

 3.2接口测试工具

ajax整合_第10张图片

 3.3接口文档

ajax整合_第11张图片

4、form表单

4.1表单属性

ajax整合_第12张图片

 ajax整合_第13张图片

 ajax整合_第14张图片

 ajax整合_第15张图片

 

 4.2表单的同步提交

4.2.1表单同步缺点

 4.2.2解决同步提交缺点

方案:表单负责提交,ajax负责将 数据传给服务器

 4.3通过ajax提交表单数据

4.3.1监听表单事件

 

4.3.2阻止表单默认提交行为

 

4.3.3 serialize()函数

ajax整合_第16张图片

 eg;

ajax整合_第17张图片

5、ajax加强

ajax整合_第18张图片

5.1XMLHttpRequest的基本使用

5.1.1使用xhr发起get请求

ajax整合_第19张图片

 eg1:不带惨请求:

 ajax整合_第20张图片

eg2:带参请求:

ajax整合_第21张图片

5.1.2查询字符串

ajax整合_第22张图片

 5.1.3URL编码与解码

ajax整合_第23张图片

 ajax整合_第24张图片

5.1.4利用xhr发起post请求

ajax整合_第25张图片

 ajax整合_第26张图片

 6、数据交换格式

6.1XML

ajax整合_第27张图片

 ajax整合_第28张图片

 ajax整合_第29张图片

 6.2JSON

ajax整合_第30张图片

 ajax整合_第31张图片

ajax整合_第32张图片

 ajax整合_第33张图片

ajax整合_第34张图片

 ajax整合_第35张图片

 ajax整合_第36张图片

7、封装自己的ajax函数

ajax整合_第37张图片

 ajax整合_第38张图片

 8、XMLHttpRequest Level2新特性

8.1设置http请求时限

ajax整合_第39张图片

 eg:

8.2formData对象管理表单数据

                       

 提交表单

ajax整合_第40张图片

 eg;

获取表单值

ajax整合_第41张图片

 eg:

    

8.3用xhr上传文件

ajax整合_第42张图片

 ajax整合_第43张图片

 ajax整合_第44张图片

 

 ajax整合_第45张图片

 ajax整合_第46张图片

 ajax整合_第47张图片

 ajax整合_第48张图片

 上传文件完整案例:




    
    
    
    Document
    
    


    
    
    
    
    
    
    
0%

9、axios

ajax整合_第49张图片

 ajax整合_第50张图片

 ajax整合_第51张图片

 ajax整合_第52张图片

 ajax整合_第53张图片

eg:


                    
                    

你可能感兴趣的:(前端,ajax)