js学习笔记(十)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u014636245/article/details/78934226

JavaScript

JavaScript 请求Requests

js 作为一门web端编程语言,与服务器的交互是其中很重要的一部分。js主要通过requests向服务器请求数据并,通过response接收服务器的数据。

一、requests

对于网络请求来说,主要使用AJAX(异步 JavaScript 和 XML)来说,主要利用XHR(XMLHttpRequest )object1,2来进行请求作业,而请求的方式则分为了GETPOST两种方式。

两者的区别在于GET方式直接将请求的参数组到url中进行(放在requestsHead),并不改变服务器的内容,而post则是将数据放在请求的消息体body中传送个服务器,可能会改变服务器的数据。ref:1

//在js中主要使用XMLHttpRequest对象来创建一个实例化的新请求对象
//XMLHttpRequest对象基本属性:
'readyState'    //0为初始化,1调用open,2调用send,3接受数据,4接受完成
'onreadystatechange' //事件句柄函数
'responseText'      //响应文本的请求
'responseXML'       //响应Document对象的请求
'Status='           //响应状态码,http://www.runoob.com/http/http-status-codes.html
'statusText'        //响应状态文本  

//XMLHttpRequest对象基本方法:
'.open(method,url,async,user,passwd)'     //初始化请求
'.setRequestHeader(header value)'       //设置请求头
'.send(data)'       //发送请求
'.getResponseHeaders(head)' //指定键head的value
'.getAllResponseHeaders()'    //所有的响应头信息
'.Abort()'


//示例----------------------------//
const xhr = new XMLHttpRequest();  //利用new实例化一个新的请求对象,需要区分类和对象new的区别,这里的new可以看做是XMLHttpRequest()对象的继承,有类似class但这里是对象,对象obj。
const url = 'google'    //string url
//cosnt data = JSON.stringify({id: '200'})  //js格式转为string格式,作为数据用POST方法请求时使用

//定义请求头部,以及服务器地响应属性
xhr.responseType = 'json'
xhr.onredystatechange = function(){
    if(xhr.readyState === XMLHttpRequest.DONE){
    //some statement code
    }
}  //作为一部的响应函数,是一个事件句柄

//打开请求并发送请求
xhr.open('GET',url)  //GET 方法和POST方法,url为服务器地址
xhr.send();
//xhr.send(data);  //当使用POST方式进行请求的话


二、$.ajax() 的请求requests方法

$.ajax(*obj*)jQuery库提供的处理AJAX请求的方法。jQuery基本用法$(selector).action()
AJAX可以再不加载页面的情况下动态更新网页部分内容

$.ajax({seting obj}),通过定义内部的设置对象来设置方法的对应属性,一般需要设置:
- 目标地址的url
- 请求的方式type(若是POST则需要使用data属性为JSON.stringify({JSON OBJ})以及发送数据类型content-type
- 同时还要设置数据类型dataType,希望接收类型,服务器返回的类型
- 响应处理函数success(response)错误处理函数error(jqXHR,status,errorThrown)
ajax()参考&2

//示例----------------------------//
$.ajax({                         //setting objcet
    url: 'some target link',
    type: 'GET'/'POST', //请求方法
    dataType: 'json',  //数据类型,还包括xml,html,script,jsonp,text等
    //data: JSON.stringify({id: 200})  //post请求的body数据部分
    //contentType: 'application/json'  //发送请求体的类型

    success(response){
        '用于处理相应成功的代码'
        //response是成功响应的返回对象
    },  
    error(jqXHR,status, errorThrown){
        '处理响应错误的代码'
        //jqXHR是$.ajax()返回的XHR对象,包含错误信息
    }

});


三、简化—$.get()$.post()方法用于AJAX的requests

jQuery库还提供了更为简便的请求方法$.get()$.post()方法。
可以利用更为简便的方式来调用ajax()方法,具体的语法如下(其中省略了type参数,’GET’/’POST’())

$.get('target url',response => {'response function'}, 'json')          
//包括目标url,相应的箭头表达式、以及接受响应数据格式,如果需要定义更多的参数,需要定义setting对象传输属性和方法
$.post('target url',{data},response => {'response function'}, 'json')
//post方法加上了需要传输的数据对象{data},同样,如果需要额外的设置参数,则传入一个包含属性和方法的设置对象来使用。与$.ajax({obj})相似,省略type属性。

$.getJSON('target url',response => {'response function'})
//更为简略的形式,可以省略dataType:'json'
//http://api.jquery.com/jquery.getjson/


四、总结

js的AJAX请求方式主要有XHRjQuery两种:
- xhr = new XMLHttpRequest()利用XHR对象来进行请求,需要设置对应的请求属性并调用.open()和.()send方法
- 另一种是利用jQuery库的$.ajax()系列的方法,传入设置对象并运行来进行http请求,包括$.get()/.post()/.getJSON等方法。


tips
1.js是异步非阻塞语言,异步js、XML、ajax
2.js判断数据类型用typeof 参考
3.创建对象,需要加关键字new,基本的对象要加(),要写为a = new XMLHttpRequest(),而类与对象的主要区别在于是否使用构造函数constructor;
4.关联数组和对象是一回事
var a = {name:'tom'} <~~> a['name']='tom'
5.$() DOM中 document.getElementById() 方法的简写,返回参数传入的id的那个元素。
6.在http请求中参数的意义:accept-encoding表示浏览器可以接受的编码方式,content-encoding表示发送数据的编码方式,content-type表示发送数据的内容类型;
response中accept-encoding为浏览器接受的编码/压缩类型,content-encoding为相应内容的编码方式,congtent-type为相应内容的形式、有时还会加上charset=’utf-8’来说明编码方式。

要理解这些首先需要学习字符集和字符编码的相关内容,
- 包括标准编码,以及文字编码知识&2特殊非ASCII字符的URL编码%HH形式&2&3
- 同时还需要了解HTTP请求的content-typecontent-encoding,以及常用的gzip压缩头和原理
可以利用各种在线转码解码工具帮助学习。

猜你喜欢

转载自blog.csdn.net/u014636245/article/details/78934226