Ajax入门及jQuery库对Ajax的封装

一、Ajax

1、什么是Ajax

全称为Asynchronous JavaScript And XML，异步JavaScript和XML的一种网页开发技术。是由JavaScript、XML、DOM、CSS等多种已有技术组合而成的一种浏览器端技术。用于实现与服务器进行异步交互的功能。它可以实现页面无刷新更新数据(页面的局部刷新),提高用户浏览网页的体验。相较于传统网页，使用Ajax技术的优势具体有以下几个方面：

（1）、减轻服务器的负担
（2）、节省带宽
（3）、用户体验更好

2、Ajax的实现步骤

(1)、创建Ajax对象

var xhr = new XMLHttpRequest();  //xhr就是Ajax对象(异步请求对象)
1

(2)、由Ajax对象调用open方法配置请求方式、请求地址

   xhr.open('请求方式','请求地址')
1

(3)、由Ajax对象调用send方法向服务器发送请求

   xhr.send()
1

(4)、获取服务器端的响应信息：监听onload事件

xhr.onload = function(){}
1

(5)、获取服务器端响应给客户端的数据：通过触发onreadystatechange事件

xhr.onreadystatechange = function() {}
1

3、Ajax的状态码

Ajax状态码

说明

0

请求未初始化（还没有调用open()方法）

1

请求已经建立(调用了open方法)，但是还没有发送（还没有调用send()方法）

2

请求已经发送

3

请求正在处理中，通常响应中已经有部分数据可以用了

4

响应已经完成，可以获取并使用服务器的响应数据了

(1)、Ajax对象获取状态码的方法：

 xhr.readyState
1

(2)、Ajax对象获取服务器端的响应数据

xhr.responseText
1

演示：

    
    
    
    


    

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

在Express项目中执行到这一步时会出现跨域和同源问题，具体什么是跨域和同源以及解决方法可以看我之前写的博客

二、jQuery库对Ajax的封装：

1、底层封装函数

   $.ajax({
   
	  url: '请求地址',
	  
	  type:'请求方式',
	  
	  contentType:'请求参数的类型',
	  
	  data:'发送到服务器的数据',
	  
	  dataType:'服务器返回的数据类型',
	  
	  success:function(data, textStatus){},   --- 请求-响应成功后调用的函数
	  
	  error：function(xhr,){} --- 请求-响应失败后调用的函数
   })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

演示：

    
    
    
    



    

         
            用户名：
         
         


         
            密码:
         
          


          重置
               
          登录
    
    


    
    
      $(function(){
        //1、给登录按钮绑定click事件
            $('#btn_submit').click(function(){
                //2、获取用户输入的用户名，密码
                let name = $('#username').val()
                let pwd = $('#userpwd').val()
                //3、调用Ajax函数向服务器发起异步的请求
                $.ajax({
                   url :'http://localhost:3000/login/get',
                    type:'get',
                 data:{
                        username:name,
                        userpwd:pwd
                    },
                   success:function(data){
                       $('#msg').html(data)
                    },
                    error:function(error){
                        console.log(error)
                 }
                })               
            })            
        }) 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

（express框架）：

var express = require('express')

var router = express.Router()

//http://localpost:3000/login/get
router.get('/get',(req, res) => {
        let uname = req.body.username
        let upwd = req.body.userpwd
        if(uname === 'abc' && upwd ==='123456'){
                res.send('登录成功')
        }else{
                res.send('用户名或密码错误，登录失败')
        }
})

module.exports = router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

输入用户名：abc，密码：123456，显示登录成功

输入用户名：abc，密码：12345，用户名或密码错误，登录失败

2、高层封装函数

2.1、get请求

 $.get(url, [data], [callback], [type])  //发起get请求
		
		    url：请求的服务器地址
			
			data：请求参数(key/value)
			
			callback：请求成功的回调函数
			
			type：响应信息的格式





    
    
    
    



    

        

            
               用户名：
            
            


            
               密   码：
            
             


             重置
                  
             登录
       
       


       
    
    


    

    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

express框架：

var express = require('express')
var router = express.Router()

//http://localpost:3000/login/get
router.get('/get',(req, res) => {
        let uname = req.body.username
        let upwd = req.body.userpwd
        if(uname === 'abc' && upwd ==='123456'){
                res.send('登录成功')
        }else{
                res.send('用户名或密码错误，登录失败')
        }
})

module.exports = router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2.2、post请求

$.post(url, [data], [callback], [type])  //发起post请求

    url：请求的服务器地址
	
	data：请求参数(key/value)
	
	callback：请求成功的回调函数
	
	type：响应信息的格式





    
    
    
    



    

        

            
               用户名：
            
            


            
               密   码：
            
             


             重置
                  
             登录
       
       


       
    
    
    

    


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

express框架：

var express = require('express')
var router = express.Router()
router.post('/post',(req, res) => {
        let uname = req.body.userName
        let upwd = req.body.userPwd
        if(uname === 'abc' && upwd ==='123456'){
            res.send('登录成功')
        }else{
                res.send('用户名或密码错误，登录失败')
        }
})
module.exports = router
1
2
3
4
5
6
7
8
9
10
11
12

3、辅助函数

serialize()：表单序列化函数(将表单(form)中的控件的值转换成字符串)
演示：

    
    
    
    


    
毕业院校:  

  
    西安交通大学
    北京大学
  
  



  爱好
   足球
   电影
  


  性别：
   男
   女




获取表单数据






1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

结果：

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦