Ajax的入门

1.服务器和客户端

服务器:在Internet中,负责存放和对外提供资源的电脑

客户端:在Internet中,负责获取和使用消费资源的电脑

服务器的本质就是电脑

1.1URL地址

URL统一资源定位符,用于标识互联网上面每个资源的唯一存放位置,浏览器通过URL地址才能正确定位到资源存放的位置。

    • 2URL的组成

  1. 客户端与服务器之间的通信协议

  1. 存放该资源的服务器名称

  1. 资源在服务器上的具体存放位置

1.3 服务器的通信过程

1.4 资源类型

文字资源

图片资源

音频资源

视频资源

图标资源

数据资源

HTML是页面的骨架

CSS是页面的颜值

JavaScript是页面的行为

数据是页面的灵魂,上面三个都是为数据而服务

1.5请求方式

在网页上面请求服务器的数据资源,需要使用XMLHttpRequest对象,XMLHttpRequest对象是浏览器提供的js对象,可以通过它请求到服务器的数据资源

简单用法:var obj=new XMLHttpRequest();

  1. get方式:通常用于向服务器获取资源

  1. post方式:通常用于向服务器提交资源

2.AJAX

全称Asynchronous JavaScript And XML(异步JavaScript和XML)

在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式就是Ajax

2.1 应用场景

  • 用户名检测

  • 搜索提示

  • 数据的分页显示

  • 数据的增删改查等

2.2jQuery中的Ajax

常见三种方法

  1. $.get()

用来发起get请求,向服务器发起请求获取数据

参数名

参数类型

必选项

说明

url

String

要请求的资源地址

data

object

请求资源时携带的参数

callback

function

请求成功的回调函数

  1. $.post()

参数名

参数类型

必选项

说明

url

String

要请求的资源地址

data

object

请求资源时携带的参数

callback

function

请求成功的回调函数

  1. $.ajax(

type:‘’,//请求方式

url:‘’,//请求的url地址

data:‘’,//携带的数据

success:function(res){

}//请求成功之后回调的函数

)

2.2.1 form表单

    • 组成
  1. 表单标签

  1. 表单域:文本框、密码框、隐藏域、多选文本、复选框、单选框、下拉选择框、文件上传框等

  1. 表单按钮

    • 属性

属性

说明

描述

action

规定提交表单时向何处发送

target

在何处打开actio_URL

_blank

新窗口

_self

在相同的框架打开

_parent

在父框架打开

_top

在整个窗口打开

framename

在指定框架打开

method

提交方式

post

安全性高

get

安全性不高

enctype

发送表单数据之前对数据进行编码

application/x-www-form-urlencoded

发送之前编码所有字符(默认)

multipart/form-data

不对字符编码

使用文件上传表单控件时必须使用该值

text/plain

空格转换成+ ,但不对特殊字符编码

    • 表单的同步提交

通过点击submit按钮,触发表单提交操作,使得页面跳转到action URL 的行为,称为表单的同步提交

缺点:

  1. 提交表单后,页面整个跳转,跳转到action URL 所指向的页面,用户体验差

  1. 提交之后,当前页面的状态和数据会丢失

解决:

表单只负责采集数据,Ajax负责将数据提交到服务器

$().on('submit',function(){})

阻止表单的默认提交实践

$().on('submit',function(e){

e.preventDefalut();

})

2.2.2模板引擎 art-template

标准语法:{{}}

  1. 原文输出:{{@ value}} 用于value中含有HTML标签

  1. 条件输出: {{ if else}} 按需输出

  1. 循环输出: {{each arr }}{{ $index }} {{$value}} {{}/each}

  1. 过滤器: {{value|filterName }}

template.defalut.imports.filterName=function(value){}

2.2.3正则

  1. exce()函数用于检索字符串中的正则表达式的匹配

如果满足条件返回匹配值,反之返回null

RegExpObject.exce(string)

  1. replace()函数用于字符串中的一些字符替换另一些字符

2.3XMLHttpRequest的基本使用

2.3.1使用xhr发起GET请求

步骤:

  1. 创建xhr对象

  1. 调用xhr.open()函数

  1. 调用xhr.send()函数

  1. 监听xhr.onreadystatechange事件

2.3.2url编码和解码

url只允许出现英文字符,数字

若有中文则需要编码encodeURI()

解码;decodeURI()

2.3.3使用xhr发起POST请求

步骤:

  1. 创建xhr对象

  1. 调用xhr.open()函数

  1. 设置Content-Type属性

  1. 调用xhr.send()函数

  1. 监听xhr.onreadystatechange事件

2.3.4数据交换格式

客户端和服务器之间的数据交换格式,XML和json

  1. xml:可拓展标记语言

XML和HTML的区别

XML和HTML虽然都是标记语言,但是,它们两者之间没有任何的关系。

●HTML被设计用来描述网页上的内容,是网页内容的载体

●XML被设计用来传输和存储数据,是数据的载体

缺点:格式臃肿,与数据无关代码多,体积大,传输效率低

在js解析xml比较麻烦

  1. Json (JavaScript Object Notation JavaScript对象表示法) 本质字符串

更小更快更容易解析

json的对象结构:

  1. 对象{ key:value,key:value}

  1. 数组

  1. JSON语法注意事项

①属性名必须使用双引号包裹

②字符串类型的值必须使用双引号包裹

③JSON中不允许使用单引号表示字符串

④JSON中不能写注释

⑤JSON的最外层必须是对象或数组格式

⑥不能使用undefined或函数作为JSON的值

JSON的作用:在计算机与网络之间存储和传输数据。

  1. js对象和json转换

  • JSON.parase(json格式)

  • JSON.stringify(js对象)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值